1

我一直在尝试将 'mouseenter' 事件添加到现有单击功能上的附加鼠标悬停功能，但似乎没有找到正确的公式来达到预期的效果。

原始代码：

    $('.navhandle, .navcontainer, #tray-button, .page-template-template-home-php .lines, .single-portfolio .lines').hover(
function(){ $('#supersized img').addClass('resize'); //add class for css3 transitions
$thisid = $(this).attr("id");
$thisclass = $(this).attr("class");
$navnow = $('.navhandle').css('left');

if ($navnow == navhandleinit) {

if (($thisid == 'tray-button')) {
    $('#thumb-tray').stop().animate({bottom : 0}, 300);
}
    $('#prevslide').stop().animate({left: 25 }, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: -210 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: -10 }, 500, 'easeOutCubic');
     $('.mainbody').stop().animate({marginLeft: 10}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('.videowrapper').animate({width: '120%', paddingLeft:0}, 500, 'easeOutCubic');


    $('.nav').fadeOut(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");
},function(){ $('#prevslide').stop().animate({left: 245}, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: 0 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: navhandleinit}, 500, 'easeOutCubic');
    $('.mainbody').stop().animate({marginLeft: 220}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('#thumb-tray').stop().animate({bottom : -$('#thumb-tray').height()}, 300);
    $('.videowrapper').animate({paddingLeft: 220, width: '100%'}, 500, 'easeOutCubic');

    $('.nav').fadeIn(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");

    $navnow = navhandleinit;
    }

只需将“click”更改为“mouseenter”即可触发效果，但不能将其隔离到特定元素。

失败的尝试：

  jQuery(function($) {

var navhandleinit = $('.navhandle').css('left');
var navwidth = $('.navcontainer').width() + 30;
var mainmargin = $('.mainbody').css('margin-left');
var $navnow = $('.navhandle').css('left');
var navtray = $('#thumb-tray').css('left');

$('.navhandle, .navcontainer').mouseenter(function() {

$('#supersized img').addClass('resize');
$thisid = $(this).attr("id");
$thisclass = $(this).attr("class");
$navnow = $('.navhandle').css('left');

if ($navnow == navhandleinit) {

if (($thisid == 'tray-button')) {
    $('#thumb-tray').stop().animate({bottom : 0}, 300);
}
    $('#prevslide').stop().animate({left: 25 }, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: -210 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: -10 }, 500, 'easeOutCubic');
     $('.mainbody').stop().animate({marginLeft: 10}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('.videowrapper').animate({width: '120%', paddingLeft:0}, 500, 'easeOutCubic');


    $('.nav').fadeOut(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");



} else {

    $('#prevslide').stop().animate({left: 245}, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: 0 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: navhandleinit}, 500, 'easeOutCubic');
    $('.mainbody').stop().animate({marginLeft: 220}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('#thumb-tray').stop().animate({bottom : -$('#thumb-tray').height()}, 300);
    $('.videowrapper').animate({paddingLeft: 220, width: '100%'}, 500, 'easeOutCubic');

    $('.nav').fadeIn(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");

    $navnow = navhandleinit;
}

});

});

如何有效地添加 mouseenter 事件，以及可选的平板电脑滑动事件，同时保持原始的单击事件功能？

可在http://stage.daylight.pro获得实时页面。

我会很感激你的帮助，谢谢。

4

1 回答 1

2

我不确定这是否只是从您的代码中省略了，但是您的示例都没有关闭hover()andmouseenter()方法。你失败的尝试应该以 ); 像

$('.navhandle, .navcontainer').mouseenter(function() { ... });

除此之外，我不确定为什么您的hover()ormouseenter()方法会影响定义的任何点击方法（除非函数中的某些内容click()专门覆盖了您的hover()函数中的某些内容）。

更新：如果我理解你，你有以下参数/目标：

  1. hoverjQuery函数中的现有代码
  2. 您希望保持原样，但添加一个附加mouseenter功能
  3. click您还想维护一个现有功能
  4. 此外，您希望触摸用户体验hover和click功能，而不仅仅是click（因为触摸用户体验hover和click同时）

就mouseentervs而言hover。我会让你自己（和其他开发人员）更干净一些，并分离出这些功能。与其在参数中定义匿名函数，不如hover说如下：

$('myDiv').hover(hoverIn, hoverOut);
function hoverIn() { ... }
function hoverOut() { ... }

通过这种方式，您可以更轻松地清楚地查看您的重复代码。此外，如果您希望另一个函数（例如，禁用它的调用），这更适合重用。

您hover的mouseenter、 和mouseout函数不应妨碍click事件。在每次互动中，您都会同时拥有这两种互动mouseenter并click连续发生。

也许使用 jQuery mobile 来处理tap暂时暂停点击的事件。但是，最终，该hover事件只是一个细节，它很可能会惹恼触摸设备上的人们在触发 click 事件之前触发悬停事件时必须暂时等待。

希望这可以帮助。

于 2012-09-07T14:31:45.877 回答