jQuery animation changes css but doesn't animate

Question

I am trying to create a little jQuery switch plugin.

Here is my code:

(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) {
  	console.log("switched on!");
  });
});

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

Live Demo: https://jsfiddle.net/cutsomeat/zd6ucc5u/

When I have the defaultSide option set to "left" it works fine. However, when I have the defaultSide option set to "right", something strange happens. The css "margin-left" property has changed like it's supposed to, yet you don't see any movement of the element. The css will keep changing back and forth, but the element will remain in the original position.

Can anyone explain to me why this is happening?

Hint: The Stack Snippets feature you used as a code block is fully capable of doing live demos, right here on-site. — T.J. Crowder
– T.J. Crowder, Commented Apr 13, 2016 at 7:13

Sari Alalem · Accepted Answer · 2016-04-13 07:43:33Z

1

By commenting out this line, all works fine:

float: settings.defaultSide,

Try it: Demo here

answered Apr 13, 2016 at 7:43

Sari Alalem

8707 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sankorati · Accepted Answer · 2016-04-13 07:43:51Z

1

You have a redundant styling on your "button" element, float "right", which makes the margin you are setting irrelevant. Remove the line

float: settings.defaultSide,

And it should be ok.

See updated fiddle

answered Apr 13, 2016 at 7:43

sankorati

13712 bronze badges

Collectives™ on Stack Overflow

jQuery animation changes css but doesn't animate

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related