Question

我希望div在从当前宽度（400px）到特定指定宽度的点击时向右扩展。（div将照片作为背景，因此最终结果宽度在每种情况下都会有所不同，但在大多数情况下大约为1000px。）

如何使用jquery / javascipt执行此操作？感谢

Answer 1

定义宽度：

$(".clickElement").click(function(){
    if($(this).is(".open"))
    {
        $(this).animate({ width: 400}, 500);
    }
    else
    {
        $(this).animate({ width: 1000}, 500);
    }
    $(this).toggleClass("open");
});

检查图像的宽度（背景）：
请参阅此小提琴：http://jsfiddle.net/4ZfsD/2/

function toggle() {
    if ($(this).is(".open")) {
        $(this).animate({
            width: 400
        }, 500);
    }
    else {
        $(this).animate({
            width: $(this).data("width")
        }, 500);
    }
    $(this).toggleClass("open");
}
$("#test").click(function() {
    // No image width yet, we have to get it from the image
    if (!$(this).data("width")) {
        var img = new Image();
        var _this = $(this);

        img.onload = function() {
            // Image is loaded, save the width and call the toggle function
            _this.data("width", this.width);
            toggle.call(_this);
        }
        img.src = $(this).css("backgroundImage").replace("url(\"", "").replace("\")", "");
    } else { // We already got a width, just call toggle function
        toggle.call(this);
    }
});

CSS：

#test
{
     width: 400px;
 height: 400px;
 background-image:url("http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg");   
}

Answer 2

使用Jquery

<div id="box">Click me to grow</div>

  <script>
  $("#box").one( "click", function () {
  $( this ).css( "width","+=200" );
  });
  </script>

如何在鼠标单击时使div扩展（通过向外滑动）宽度

2 个答案: