CODEWITHSUNDEEP
jqueryhtmlsliderhideshow
Hocine Ache
Hocine Ache

Reputation: 61

how to stop a show() when i hover another div container?

i am trying to make a little div show up inside a wrapper div when its on hover and it all works good but for example if i pass from a wrapper to the wrapper next to it the first little div on the first wrapper stay like stuck i think it is a stop() problem so how can i fix it, thanks.

$(function(){
        $(".show-more").hide()
        $(".product-box").hover(function(){
            $(this).stop().children(".show-more").show("slide", { direction: "down" }, 300);
            })
        $(".product-box").mouseleave(function(){
            $(this).stop().children(".show-more").hide("slide", { direction: "down" }, 300);    
                })
});

the HTML CODE is:

<div class="product-box">
<div class="show-more">
</div>
<img src="'.$pic.'" />
<ul>
<li>'.$designiation.'</li>
<li>'.$type.'</li>
<li><strong>'.$variete.'</strong></li>
</ul>
</div>'

this html code is inside a php loop.

Upvotes: 1

Views: 293

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$(".product-box").hover(function(){
    $(this).find(".show-more").stop().slideDown(300);
},function(){
    $(this).find(".show-more").stop().slideUp(300);
});

Working Demo

Read slideDown() and slideUp()

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206348

LIVE DEMO

Something like this?

$(".product-box").hover(function(){
  $(this).find(".show-more").stop().slideToggle(300);
});

Remember that hover used as a named method .hover() is a way to register both mouseenter and mouseleave events.

Upvotes: 1

patel.milanb
patel.milanb

Reputation: 5992

working fiddle: http://jsfiddle.net/patelmilanb1/DDqFm/

$(function () {
    $(".show-more").hide();
    $(".product-box").hover(function () {
        $(this).find(".show-more").slideDown(300);
    }, function () {
        $(this).find(".show-more").slideUp(300);
    });
});

Upvotes: 0

Related Questions