The error is that _this.offset
is not a function. I logged this to the console and it was the <li>
element I clicked on, so I am confused why this would not work.
$('.item').click(function(e) { var _this = this; var topx = _this.offset().top; var leftx = _this.offset().left; var moveArea = $('#replace').offset().top; var moveLeft = $('#replace').offset().left; var moveUp = topx - moveArea - 50; _this.css('position', 'absolute').css('top', moveUp).css('zIndex', 50).css('left', leftx); _this.animate({ top: -50, left: moveLeft }, 300) });
#replace { height: 50px; width: 100px; background-color: green; } #list { height: 200px; overflow-y: scroll; } .item { height: 50px; width: 100px; background-color: blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <div id="replace"> Replace this </div> <ul id="list"> <li class="item">TEST</li> <li class="item">TEST</li> <li class="item">TEST</li> </ul>
I also want to create an animation such that the item I click in the list moves up to replace the green "Replace this" box, if someone could help with that too.
I created a jsfiddle to show the error: https://jsfiddle.net/v5fjjwmj/2/
this
(and hence _this
) inside your event handler refers to a DOMElement which doesn't have the offset()
method as that's part of jQuery. To fix this you can create a jQuery object using $(this)
:
$('.item').click(function(e) {
var $this = $(this);
var topx = $this.offset().top;
var leftx = $this.offset().left;
var moveArea = $('#replace').offset().top;
var moveLeft = $('#replace').offset().left;
var moveUp = topx - moveArea - 50;
$this.css({
'position': 'absolute',
'top': moveUp,
'zIndex': 50,
'left': leftx
}).animate({
top: -50,
left: moveLeft
}, 300)
});
Also note the use of the object provided to a single css()
call over multiple calls to the same method.
Replace these two lines:
var topx = _this.offset().top;
var leftx = _this.offset().left;
with:
var topx = _this.offsetTop;
var leftx = _this.offsetLeft;
As .offset()
is a jquery function and _this
is a DOM element.
Also for your .css
line you have to wrap _this
in $(...)
again because _this
is a DOM element and **not a jQuery object.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.