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()またはmouseenter()メソッドが定義されたクリックメソッドに影響を与える理由がわかりません（関数内の何かclick()が関数内の何かを明確にオーバーライドしない限りhover()）。

更新: 私があなたを理解している場合、次のパラメーター/目標があります:

  1. jQueryhover関数内の既存のコード
  2. それをそのままにしておきたいのですが、追加のmouseenter機能を追加します
  3. click維持したい既存の機能もあります
  4. また、触るだけではなく触るユーザーにも体験hoverしてもらいたい（触るユーザーも同時に体験するので）clickclickhoverclick

mouseenter対までhover。私は自分自身 (および他の開発者) のために少しきれいにして、機能を分離します。パラメータ内で無名関数を定義するのではなく、次のhoverように言います。

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

このようにして、オーバーコードとアウトコードをより簡単に明確に確認できます。また、別の関数で呼び出しを無効にしたい場合は、これを再利用することをお勧めします。

hover、mouseenter、および関数がイベントmouseoutの邪魔にならないようにしてください。clickやり取りのたびに、両方が発生し、連続mouseenterして発生します。click

tapおそらく、クリックを一時的に停止するイベントにjQueryモバイルを使用します。ただし、最終的には、このhoverイベントは便利なだけであり、クリック イベントを発生させる前に、ホバー イベントが発生するまでしばらく待たなければならないことは、タッチ デバイスを使用している人々を苛立たせる可能性があります。

お役に立てれば。

于 2012-09-07T14:31:45.877 に答える