CODEWITHSUNDEEP
javascriptjqueryonclickonhover
user1845661
user1845661

Reputation: 127

How to change hover to click in jquery slider

I am using the following code (which I found elsewhere and am trying to modify to suit my needs) to create a div that slides from the right side onto my screen. How would I go about making it slide out when I click instead of hover? Thanks, in advance for your help.

jQuery(function($) {
$(document).ready(function() {
    $('#introbutton').hover(function() {
        $('#intro-container').stop(true, false).animate({
            'left': '0px'
        }, 900);
    }, function() {
        jQuery.noConflict();
    });

    jQuery('#introbutton').hover(function() {
        // Do nothing
    }, function() {

        jQuery.noConflict();
        jQuery('#intro-container').animate({
            left: '100%'
        }, 800);

    });
});
});

Upvotes: 1

Views: 2490

Answers (2)

Kneel-Before-ZOD
Kneel-Before-ZOD

Reputation: 4221

Well, instead of using

 
 $('#introbutton').hover(function(){})

use 

 
  $('#introbutton').click(function(){})

Of course, you have to realize that unlike hover, which returns back to its previous state, the div won't return back to its original state after the click function has run. You might want to factor that into the overall solution.

Hope this helps.

Edit

This code snippet resolves all the problem

 
var is_show = true;
jQuery(function($) {
  $(document).ready(function() {
    $("#introbutton").click(function(){return runFunction();});    
  });
});


function runFunction(){
    if (is_show){ //show div
        is_show = false;
        $('#intro-container').animate({
            'left': '0px'
        }, 900);       
    }
    else{ //hide div
        is_show = true;
        $('#intro-container').animate({
            'left': '100%'
        }, 800);         
    }
    return false;
}

Upvotes: 1

Braunson
Braunson

Reputation: 717

Try using on.() i.e.

$('#introbutton').on('click', function() {
    // do whatever here
});

Edit

$('#introbutton').on('click',function(){
    $('#intro-container').stop(true, false).animate({'left': '0px'}, 900);
});

​You could also use click as per TheSmose as its the "shortcut method" to on()- but keep in mind

.on() is the recommended way to do all your event binding as of jQuery 1.7. It rolls all the functionality of both .bind() and .live() into one function that alters behavior as you pass it different parameters.

Upvotes: 2

Related Questions