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

here current jsfiddle example

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');         });     }) }); 

updated demo


Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -