Javascript 如何在jquery滑块中将鼠标悬停更改为单击

我正在使用下面的代码（我在别处找到的代码，正在尝试修改以满足我的需要）创建一个从右侧滑动到屏幕上的div。当我单击鼠标而不是悬停时，如何使其滑出？提前谢谢你的帮助

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);

    });
});
}); 

试试穿上

编辑

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

​您也可以使用click as TheSmose作为on（）的“快捷方式方法”-但请记住

.on（）是从jQuery开始执行所有事件绑定的推荐方法 1.7. 它将.bind（）和.live（）的所有功能合并到一个函数中，当您传递不同的参数时，该函数会改变行为

嗯，不是用

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

使用

当然，您必须认识到，与hover不同，hover返回到其先前的状态，在click函数运行后，div不会返回到其原始状态。您可能希望将其考虑到整体解决方案中

希望这有帮助

编辑 这个代码片段解决了所有问题

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;
}
 

---

或者：

$（“#introbutton”）。单击（函数（）{

Braunson，您的建议有效，但我需要找出如何使其滑回左侧：100%；第二次单击。有任何建议吗？谢谢，然后您可以使用切换（）：）那么，你的意思是不可能使用我正在使用的代码使其在第二次单击时返回吗？嗯，你可以定义两个函数，然后将变量设置为true/false；当第一次单击时，你可以将变量设置为true，然后执行第一个函数；再次单击后，将变量设置为false，然后执行第二个函数动作。我认为这应该可以。对不起，我不是很精通javascript/jquery，所以我不太明白你的意思。其次，我甚至不能通过将鼠标悬停改为单击来让它工作。这完全破坏了它。我不确定我做错了什么？我有两个问题：1.你上面粘贴的代码现在可以工作吗？2.哪个元素有错误这个id introbutton？回答#1.是的，它有效。回答#2.基本上我有一个滑动到屏幕上的div。我还有一个标准的html链接，id为“introbutton”：

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

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;
}