CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
roy712
roy712

Reputation: 29

fadein fadeout jquery on mouse-over

I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.

When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.

I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..

The Html : 

<div id="container">
    <div class="logo">
        <img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
    </div>
    <div class="main" id="left">
        <div class="dot1-top">
            <img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
        </div>
        <div class="showhide">
            <div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>            
        </div>
    </div>
    <div class="main"  id="middle">
        <div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
        <div class="showhide2">
            <div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
            </div>            
        </div>           
    </div>
    <div class="main"  id="right">
        <div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
        <div class="showhide3">
            <div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
            </div> 
        </div>     
    </div>
</div>

And Here's the jsfiddle

Upvotes: 0

Views: 3492

Answers (2)

omma2289
omma2289

Reputation: 54659

I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects

$('.bg').hide();
$('.main').hover(function (){
    $(this).siblings('.main').find('.bg').stop().fadeOut();
    $(this).find('.bg').stop().fadeIn();
    $('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
    $('#logo img').attr('src',$(this).data('logo'));
    $('.main .bg').stop().fadeOut();
});

You can check the updated fiddle here

Upvotes: 0

Jeremy Moritz
Jeremy Moritz

Reputation: 14942

You need to add a hover effect on the class logo-middle.

e.g.

$(".logo-middle").hover(function mouseIsOverImage() {
    /* keep the image */
}, function mouseIsOffImage() {
    /* make the image what it was before */
});

By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.

Upvotes: 2

Related Questions