Convert click code to hover code

Question

How can I change the following menu code to open/close when the mouse hovers, instead of when it is clicked on?

var w = 0;

$('.slide').children().each(function () {
    w += $(this).outerWidth();
});

$('.outer').width(w + 5);
$('.wrap').width(w);
$('.slide').css('left', w);

$('.open').toggle(function () {
    $('.slide').stop().animate({
        left: 0
    });
    $(this).html('close');
}, function () {
    $('.slide').stop().animate({
        left: w
    });
    $(this).html('open');
});

Please check this Demo

In Fiddle, you can see the animation works on click. I need to make it work on hover. Can you help with this ?

Will changing toggle to hover won't be enough?

dachi
– dachi

2014-01-14 07:07:03 +00:00
Commented Jan 14, 2014 at 7:07 — dachi
– dachi, Commented Jan 14, 2014 at 7:07

nrsharma · Accepted Answer · 2014-01-14 07:08:36Z

1

Use .hover() api

Try this

$('.open').hover(function () {

instead of

$('.open').toggle(function () {

answered Jan 14, 2014 at 7:08

nrsharma

2,5724 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dachi · Accepted Answer · 2014-01-14 07:08:51Z

1

Just

$('.open').toggle(function() {
    $('.slide').stop().animate({
        left: 0
    });
    $(this).html('close');
}

in this part just replace toggle with hover

answered Jan 14, 2014 at 7:08

dachi

1,60211 silver badges15 bronze badges

Comments

Andrew · Accepted Answer · 2014-01-14 07:13:42Z

1

Try using $('.wrap').hover. If $('.open').hover, you will not able to click the nav items.

Also, you can create another wrapper to just wrap div.outer and a.open only

$('.wrap').hover(function() {

    $('.slide').stop().animate({
        left : 0
    });

    //this is the .wrap right now
    $(this).find('a.open').html('close');

}, function() {

    $('.slide').stop().animate({
        left : w
    });

  //this is the .wrap right now
    $(this).find('a.open').html('open');
});

http://jsfiddle.net/rooseve/42sWB/2/

edited Jan 14, 2014 at 7:13

answered Jan 14, 2014 at 7:07

Andrew

5,3601 gold badge22 silver badges22 bronze badges

Comments

Exodia · Accepted Answer · 2014-01-14 07:21:09Z

1

$('.open').on('mouseenter mouseleave', function(e) {

if(e.type === 'mouseleave') {
    $('.slide').stop().animate({
        left: w
    });
    $(this).html('open');
} else {
    $('.slide').stop().animate({
        left: 0
    });
    $(this).html('close');
}

});

answered Jan 14, 2014 at 7:21

Exodia

112 bronze badges

Comments

P R · Accepted Answer · 2014-01-14 07:13:00Z

0

var w = 0;
var isVisible = false;
$('.slide').children().each(function() {
    w += $(this).outerWidth();
});

$('.outer').width(w+5);
$('.wrap').width(w);
$('.slide').css('left', w);

$('.open').on("mouseover", function() {
    if(isVisible == false) {
        $('.slide').stop().animate({
            left: 0
        });
        $(this).html('close');
        isVisible = true;
    }
    else {
        $('.slide').stop().animate({
            left: w
        });
        $(this).html('open');
        isVisible = false;
    }
});

Firstly, when you hover the element - the div will be visible, until you hover the element for the second time.

Demo: http://jsfiddle.net/42sWB/3/

answered Jan 14, 2014 at 7:13

P R

3346 silver badges18 bronze badges

Collectives™ on Stack Overflow

Convert click code to hover code

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related