0

私は過去2日間、新しいWebサイトのフロントページで作業してきましたが、これらの1つの機能を使用できません。

このリンクを表示するのがおそらく最善です。

http://isca01.bigwavemedia.info/~stagedgo/html/

プロモーションにカーソルを合わせると、ページは左に20ピクセル押しますが、スライダーを押してクリックすると、もう一度カーソルを合わせると、右に20ピクセル押します。

私は以下のコードを使用しました。それが機能する方法は、ラッパーがプッシュされているかどうかをチェックします。

if ($('.wrapper').css('marginLeft') ==  "0px") {
          //code to push page left 20
     }
 if ($('.wrapper').css('marginLeft') >  "1px") {
          //code to push page right 20
     }

どんな助けでも素晴らしいでしょう、ありがとう。

4

4 に答える 4

3

Eugeneが言ったことの更新として、これを使用できるはずです：

if (parseInt($('.wrapper').css('margin-left').replace('px', '')) ==  0) {
      //code to push page left 20
}
if (parseInt($('.wrapper').css('margin-left').replace('px', '')) >=  20) {
      //code to push page right 20
}

これにより、返される値が整数であり、有効な属性ではない「marginLeft」ではなく、実際に左マージンの値を取得していることが保証されます。

編集：閉じ括弧を逃したことに気づきましたが、コードは私のために機能します。ここでjsfiddleのテストを行いました（マージン左の値を適切な値に変更するだけで、ボックスの色が変わることを確認できます）

于 2012-11-01T16:49:20.770 に答える
2

数値以外のものには「以上」の演算子を使用できません。

これを試して：

if ($('.wrapper').css('marginLeft') ==  "0px") {
      //code to push page left 20
} else {
      //code to push page right 20
}

または、「px」なしで数値を渡して比較することもできます。

if (parseInt($('.wrapper').css('marginLeft')) ==  0) {
      //code to push page left 20
}
if (parseInt($('.wrapper').css('marginLeft')) >=  20) {
      //code to push page right 20
}

編集：

ホバリングコード全体（200行目から243行目まで）をこれに置き換えます。基本的に、マージンが0の場合はマイナスを右に移動し、マージンが0でない場合はマイナスを左に移動します。これで問題が解決するはずです。

$(".show_hide").hover(function() {

    if(parseInt($(".wrapper").css('marginLeft')) == 0) {

        $(".wrapper").animate({
            right: -20,
            opacity: 1
        }, 300);

    } else {

        $(".wrapper").animate({
            left: -20,
            opacity: 1
        }, 300);

    };  

}, function() {

    $(".wrapper").animate({
        right: 0,
        left: 0,
        opacity: 1
    }, 300);

});
于 2012-11-01T16:35:53.187 に答える
1

JavaScriptコードは次のとおりです。

$(document).ready(function(){

// some code here

$('.show_hide').toggle(function(){
  // some code here
},
function() {
  // some code here
});

if ($('.wrapper').css('marginLeft') ==  "0px") {
  $(".show_hide").hover(function () {
    $(".wrapper").animate({ left: 20, opacity : 1 }, 300);
  },
  function () {
    $(".wrapper").animate({ left:0, opacity : 1 }, 300);
  })
}
else if ($('.wrapper').css('marginLeft') > "1px") {
  $(".show_hide").hover(function () {
    $(".wrapper").animate({ right:20, opacity : 1 },300);
  },
  function () {
    $(".wrapper").animate({ right:0, opacity : 1}, 300);    
  })
}           
});

ここで確認できるのは、ドキュメントの準備ができたら「ホバー」動作を一度定義することです。

一方、あなたがすべきことは、「トグル」イベント中にこの動作を再定義することです。

代わりにこのコードを使用することをお勧めします。

function setupHoverBehaviour() {
  var marginValue = $('.wrapper').css('marginLeft');
  if ( marginValue ==  "auto" || parseInt(marginValue) == "0" ) {
    $(".show_hide").hover(function () {
      $(".wrapper").animate({ left: 20, opacity : 1 }, 300);
    },
    function () {
      $(".wrapper").animate({ left:0, opacity : 1 }, 300);
    })
  }
  else {
    $(".show_hide").hover(function () {
      $(".wrapper").animate({ right:20, opacity : 1 },300);
    },
    function () {
      $(".wrapper").animate({ right:0, opacity : 1}, 300);  
    })
  }
}

$(document).ready(function(){

  // some code here

  $('.show_hide').toggle(function(){
    // some code here

    setupHoverBehaviour();
  },
  function() {
    // some code here

    setupHoverBehaviour();
  });

  setupHoverBehaviour();

});
于 2012-11-01T16:55:43.237 に答える
0

クリックイベントのラッパーまたはトリガー要素にクラスを追加して、プッシュされたことを示します。次に、どの要素でも.hasClass（ "pushed"）を使用して、左または右にスライドする必要があるかどうかを判断できます。

于 2012-11-01T16:34:12.633 に答える