1

ここでかなりの問題が発生しています。この Web サイトをチェックしてください。灰色のボタンをクリックすると表示され、もう一度クリックすると非表示になります。しかし、(ドラッグ開始時に) ボタンをドラッグしてコンテンツを表示すると、クリックして開いたり閉じたりすることができなくなります。コードを調べてボタンをクリックすると、.nursebutton の値が (0 -> 275 および -275 -> 0 に) 変化することがわかります。関数が適切に実行されない原因が何であるかはわかりませんslideNurse()。

「拡張」jquery.event.dragを他のJqueryと一緒に使用していますが、おそらくこれが問題ですか? あなたのいずれかがこの問題に遭遇したことがありますか? 私の問題に対する賢い代替ソリューションはありますか? ドラッグ機能と「クリック時」機能のアニメーションの両方が必要です。

以下はjqueryコードです。

ありがとう =)

var showing = false;
jQuery(function($){
var $div = $('#container');
  $('.nursebutton')
      .drag("start",function( ev, dd ){
         dd.limit = $div.offset();
         dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();              
      })
      .drag(function( ev, dd ){
         $( this ).css({
            left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )

         });
         $('#nurseView').css({
            left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
        });
      })
      .drag("end",function(ev, dd ){
         var treshold = dd.offsetX;
         var menu = $('#nurseView');
         if(treshold>1712){
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
         }
         else{
            $("#nurseView").animate({"left": "1595px"}, "fast");
            $(".nursebutton").animate({"left": "1595px"}, "fast");
         }               
      });
});

function slideNurse(){//This function works before I "activate thejquery function above
    if (!showing) {
        showing = true;
        $("#nurseView").animate({"right": "+=275px"}, "slow");
        $(".nursebutton").animate({"right": "+=275px"}, "slow");
    } else {
        showing = false;
        $("#nurseView").animate({"right": "-=275px"}, "slow");
        $(".nursebutton").animate({"right": "-=275px"}, "slow");
    }
}
4

2 に答える 2

0

以下のようにjqueryコードを変更すると、うまくいきました（完全ではありませんが、初めて失敗したので、初めて実行されたかどうかを追跡するためにブール値を追加する必要がありました）

var showing = false;
var first = false;
    jQuery(function($){
    var $div = $('#DragNursecontainer');
      $('.nursebutton')
            .click(function(){
                if(first ==true){
            if (!showing) {
                showing = true;
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $(".nursebutton").animate({"left": "1595px"}, "fast");
            } else {
                showing = false;
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
            }
                }
                else{
                    first = true;

                if (!showing) {
                showing = true;
                $("#nurseView").hide(5);
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $("#nurseView").show(5);
                $(".nursebutton").hide(5);
                $(".nursebutton").animate({"left": "1595px"}, "fast");
                $(".nursebutton").show(5);
                } else {
                showing = false;
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
                }   //slideNurse();
                }
          })
          .drag("start",function( ev, dd ){
             dd.limit = $div.offset();
             dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();              
          })
          .drag(function( ev, dd ){
             $( this ).css({
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )

             });
             $('#nurseView').css({
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });
          })
          .drag("end",function(ev, dd ){
             var treshold = dd.offsetX;
             var menu = $('#nurseView');
             if(treshold>1712){
                    showing = false;
                    $("#nurseView").animate({"left": "1872px"}, "fast");
                    $(".nursebutton").animate({"left": "1872px"}, "fast");
             }
             else{
                showing = true;
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $(".nursebutton").animate({"left": "1595px"}, "fast");
             }               
          });
    });
于 2013-05-16T19:49:55.590 に答える
0

適切な HTML と CSS を使用すれば、アニメーションを 2 つではなく 1 つにすることができると思います。どちらも同じ方向に進んでいますね。

したがって、HTML 部分については、コンテナーに実際に何かが含まれていることを確認します。それらをまとめるのが適切な方法のようです。

CSS についてはposition: relative、メイン コンテナーとposition: absolute内部コンテナーを組み合わせました。その他の変更については、フィドルを確認してください。それが設定されたら、余分なアニメーションの削除を開始しました。

実際のドラッグは jQuery UI で行うことができます。ライブラリ全体を使用するか、ドラッグ可能な部分だけを使用するかはあなた次第です。

/// <reference path="jQuery 1.9.1" />
/// <reference path="jQuery UI 1.9.2" />
// local vars
var showing = false,
    nurseContainer = $('#nurseContainer'),
    nurseButton = $("#nurseContainer a.nursebutton"),
    nurseView = $("#nurseView");

// drag event: jquery ui can filter much for you
nurseContainer.draggable(
    { 
        axis: "x",
        handle: nurseButton,
        containment: nurseView,
        drag: function(ev, ui){
            // small css position correction
            if (ui.position.left <= 50){
                ui.position.left = 50;
            }
        }
    }
);

// click event: with mouseup you don't fire extra events
nurseButton.mouseup(function(){
    if (!showing) {
        showing = true;
        nurseContainer.animate({ left: 50 }, 400);
    } else {
        showing = false;
        nurseContainer.animate({ left: 325 }, 400); // 50 + 275
    }
});

注: クリーンで読みやすい状態に保つために、可能な限り少ない文字列値を使用しました。この例で要件を微調整できることを願っています。

デモ http://jsfiddle.net/tive/AnVfh/

jQuery UI API http://api.jqueryui.com/draggable/

于 2013-05-16T23:26:38.147 に答える