انزلاق div مع مسج

يا شباب! لا بد لي من جعل انزلاق ينزلق (يسار يمين) باستخدام مسج. هذا رابط لما لدي في هذه اللحظة: http: //www.k-prim بيز/اختبار/test.html هذا يعمل بشكل جيد ولكن لا أعرف كيفية جعل div إلى شرائح اليسار عند النقر فوق صورة السهم بعد نقلها بالفعل إلى اليمين. أي مساعدة؟

شكر

0
قد تفكر في استخدام الرسوم المتحركة CSS3 أو تحتاج إلى جعلها تعمل أيضا على IE؟
وأضاف المؤلف fcalderan, مصدر

4 إجابة

يمكن أن يكون البديل نهج CSS ، باستخدام انتقالات CSS. راجع jsfiddle .

إن مقبض النقر في هذه الحالة بسيط مثل ( تحرير معالج النقر على div # slide ، لأن صورة السهم أصبحت الآن خلفيته ، يتم تعديل jsfiddle وفقًا لذلك):

$("#slide").click(function(){
    var el= $(this)
       ,isRight = /right/i.test(el.attr('class'))
       ,addremove = isRight ? 'removeClass' : 'addClass';
    el[addremove]('right');
 });​
0
وأضاف
هذا العمل مثالي جدا! شكرا يا شباب! انت عظيم!
وأضاف المؤلف Ljubo Valevski, مصدر

استخدام بسيط جدا من مسج هو تماما مثل أدناه

    <script src="jquery.min.js"></script>
 <script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function() {
          $("#left_panel").toggle("slide", { direction: "left" }, 1000);
    });
});
</script>
0
وأضاف
<script>
var pos=0;
$(function(){
    $("#clicky").click(function(){
                if(pos==0)
                {
                    $("#slide").animate({marginLeft:'500px'},'slow', function(){
                              $("img#clicky").attr("src", "right.jpg");
                    }); 
                    pos = 1;
                }
                else
                {
                    $("#slide").animate({marginLeft:'0px'},'slow', function(){
                              $("img#clicky").attr("src", "left.jpg");
                    });  
                    pos = 0;
                }
    });            
});
</script>

هذا قد يساعدك في التفكير في خوارزمية.

Notice : Not tested code, edited.

0
وأضاف
نعم فعلا!!!! هذا العمل مثالي! شكرا جزيلا!!!
وأضاف المؤلف Ljubo Valevski, مصدر
يجب أيضًا تحديث قيمة pos وإلا فسيكون 0 دائمًا
وأضاف المؤلف fcalderan, مصدر
بالتأكيد ، نسيت. شكر :)
وأضاف المؤلف totten, مصدر

ببساطة حاول هذا الرمز بدلا من الجانب النصي الخاص بك.

  $(function(){
       var i = 0;
       $("#clicky").click(function(){
       if(i==0){
           i =1;
           $("#slide").animate({marginLeft:'500px'},'slow', function(){
                 $("img#clicky").attr("src", "right.jpg");
            });
       }else{
          i=0;
          $("#slide").animate({marginLeft:'0px'},'slow', function(){
             $("img#clicky").attr("src", "left.jpg");
          });
        }
   });

})؛

0
وأضاف