jQuery animasyonu css'i değiştirir, ancak

ile uyumlu değil Biraz jQuery anahtar eklentisi oluşturmaya çalışıyorum.jQuery animasyonu css'i değiştirir, ancak

(function($){ 
 
    $.fn.slideSwitch = function (options) { 
 
    var settings = $.extend({ 
 
     defaultSide: "left", 
 
     backgroundColor: "red", 
 
     toggleSize: 30, 
 
     toggleColor: "white", 
 
     speed: 100 
 
    }, options); 
 
    return this.each(function() { 
 
     $this = $(this); 
 
     var gap = Math.round(settings.toggleSize * 0.03); 
 
     if (gap < 1) {gap = 1} 
 
     $this.css({ 
 
     width: (settings.toggleSize * 2) + "px", 
 
     backgroundColor: settings.backgroundColor, 
 
     borderRadius: settings.toggleSize + "px", 
 
     overflow: "hidden", 
 
     padding: gap + "px" 
 
     }) 
 
     var marginLeft = 0; 
 
     if (settings.defaultSide == "right") { 
 
     marginLeft = settings.toggleSize; 
 
     } 
 
     var toggle = $("<div>").addClass("ssToggle").css({ 
 
     width: settings.toggleSize, 
 
     height: settings.toggleSize, 
 
     borderRadius: settings.toggleSize, 
 
     backgroundColor: settings.toggleColor, 
 
     float: settings.defaultSide, 
 
     marginLeft: marginLeft 
 
     }); 
 
     $this.html(toggle); 
 
     $this.click(function() { 
 
     var tggl = $(this).find(".ssToggle"); 
 
     console.log("margin-left:", tggl.css("margin-left")); 
 
     if (parseInt(tggl.css("margin-left")) == 0) { 
 
      console.log("moving to the right"); 
 
      tggl.animate({ "margin-left": settings.toggleSize + "px" }, settings.speed); 
 
      if (settings.defaultSide == "right") { $(this).trigger("switchedOn"); } 
 
     } else { 
 
      console.log("moving to the left"); 
 
      tggl.animate({ "margin-left": 0 }, settings.speed); 
 
      if (settings.defaultSide == "left") { $(this).trigger("switchedOn"); } 
 
     } 
 
     $(this).trigger("switched"); 
 
     }) 
 
    }); 
 
}; 
 
}(jQuery)); 
 
$(function() { 
 
    $(".ssSwitch").slideSwitch({ 
 
    toggleSize: 30, 
 
    speend: 40, 
 
    defaultSide: "right" 
 
    }).on("switchedOn", function(e) { 
 
    \t console.log("switched on!"); 
 
    }); 
 
});

<div class="ssSwitch"></div>

Canlı Demo: https://jsfiddle.net/cutsomeat/zd6ucc5u/ Ben defaultSide seçeneği ayarlamış

"sol" iyi çalışıyor

İşte benim kodudur. Ancak, "Right" olarak ayarlanmış defaultSide seçeneğine sahip olduğumda, garip bir şey olur. Css "margin-left" özelliği, olması gerektiği gibi değişmiştir, ancak öğenin herhangi bir hareketini görmüyorsunuz. Css ileri geri değişmeye devam edecektir, ancak eleman orijinal pozisyonda kalacaktır.

Bunun neden olduğunu bana açıklayan var mı? bu satırı dışarı yorum olarak

kaynak

2016-04-13 MarkieB

İpucu güncellenen bakınız: Yığın Snippet'ların kod bloğu burada bünyesinde, canlı demolar yaparak tamamen yetenekli olduğu gibi kullanılır vardır. –