CODEWITHSUNDEEP
jqueryslideup
Steven Jones
Steven Jones

Reputation: 694

Prevent div from slideDown()

I have the following:

http://jsfiddle.net/2sQGS/

It works fine, except I don't want the blurb box to slide down when I hover over it. I am guessing it's because I'm no longer hovering the block but I would like to deactivate the blurb box from any actions somehow.

Let me know if you need more information and thank you in advance for your time.

Cheers, Steve

Upvotes: 2

Views: 181

Answers (3)

rafaelbiten
rafaelbiten

Reputation: 6240

I am new to jQuery so hopefully someone else will soon come up with a better solution to your problem but what I would do (that worked) was to simply hold the .toggle-block and the .blurb inside another div.container block.

So you'll have this html structure:

<div class="block">
    <div class="container">
        <a class="toggle-block"><img src="http://www.northareadevonfootball.co.uk/Images/football.jpg"></a>
        <div class="blurb">
            <h2>Title here</h2>
            <p>Hello there, this is a test to take the content over one line so I can see what the line height looks like.</p>
        </div>
    </div>
</div>

and then you only change this to your jquery code:

$('.container').mouseleave(function() {
     $('.blurb').stop().slideUp(500);
});

it works... there are some things to improve though... let me know if you need more help and good luck with your project!

Upvotes: 1

Jayanga
Jayanga

Reputation: 887

may be this is what you want 

(function($) {
    $(document).ready(function(){
        var check = true;                   
        $('.toggle-block').mouseenter(function() {
            if(check){
            $(this).siblings('.blurb').slideDown(1000);
                check = false;
            }
        });

        $('.toggle-block').mouseleave(function() {
            $(this).siblings('.blurb').stop().slideUp(500);
        });

    });
})(jQuery);​

Upvotes: 0

adrien
adrien

Reputation: 4439

If you want the box to stay there, remove the following lines and you're good:

    $('.toggle-block').mouseleave(function() {
        $(this).siblings('.blurb').stop().slideUp(500);
    });

If you want to hide the box when the mouse is no more on the ball, change these lines by the following :

    $('.toggle-block').mouseleave(function() {
        $(this).siblings('.blurb').stop().hide();
    });

Upvotes: 0

Related Questions