jquery - Click then mouseout, incorrectly unbinding -
i have news list type display, appearing in series of list items, have made content of news item intentionally larger <li>
, set overflow hidden. want when click on <li>
item, scrolls content upwards (so see hidden content) if mouse leaves <li>
item, wait few seconds before returning original state. have managed pretty this, have not unbound mouseout
action properly, if run mouse on <li>
item again, run delay counter again
you can see doing wrong clicking on item, mouse out , wait drop, running mouse , forth on 1 again, , clicking on it, should delay long time.
any appreciated.
html
<ul> <li> <img src="http://dummyimage.com/150x150/000/fff.png" width="150" height="150" /> <div class="header">lorem ipsum</div> <div class="body">suspendisse et gravida quam. suspendisse potenti. suspendisse ornare congue sapien, vel vulputate quam euismod cursus. vivamus id cursus nisl. phasellus dolor nisi, elementum eget vestibulum a, pulvinar sed est.</div> </li> <li> <div class="img">image</div> <div class="header">lorem ipsum</div> <div class="body">suspendisse et gravida quam. suspendisse potenti. suspendisse ornare congue sapien, vel vulputate quam euismod cursus. vivamus id cursus nisl. phasellus dolor nisi, elementum eget vestibulum a, pulvinar sed est.</div> </li>
css
* { margin:0; padding:0; } ul li { max-width:150px; max-height:200px; overflow:hidden; border:solid 1px red; display:block; float:left; margin: 0.5em; } ul li * { position: relative; } ul li .img { line-height:150px; text-align:center; } ul li .header { height: 30px; background: grey; color: #fff; text-align:center; padding: 10px; } ul li .body { background: cyan; padding: 20px; height: 160px; }
jquery
$("li").click( function () { content = $(this).children(); content.animate({ "top": "-200px" }); $(this).mouseout(function () { content.delay(1000).animate({ "top": "0px" }, function() { $(this).unbind('mouseout'); }); }) });
i realised problem was, unbind command linked content variable set items inside <li>
item, modified code find parent item , correctly disabled unbinding.
jquery
$("li").click( function () { content = $(this).children(); content.animate({ "top": "-200px" }); $(this).mouseout(function (event) { content.delay(1000).animate({ "top": "0px" }, function() { $(this).closest('li').unbind('mouseout'); }); }) });
Comments
Post a Comment