0
Я пытаюсь создать небольшой плагин переключения jQuery.jQuery анимация меняется css, но не анимация
Вот мой код:
(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>Демо: https://jsfiddle.net/cutsomeat/zd6ucc5u/
Когда я опция defaultSide установлен на "левый" он работает отлично. Однако, когда у меня есть опция defaultSide, установленная на «right», происходит что-то странное. Свойство css «margin-left» изменилось, как и предполагалось, но вы не видите никакого движения элемента. Css будет продолжать изменяться взад и вперед, но элемент останется в исходном положении.
Может ли кто-нибудь объяснить мне, почему это происходит?
Подсказка: стек Отрывки функции вы использовали в качестве блочного кода вполне способна делать демонстрационные версии, прямо здесь, на месте. –