如何在鼠标点击时将宽度向外展开（向外滑动）

Question

我想要一个div从其当前宽度（400px）单击展开到某个指定宽度。 （divs有照片作为背景，因此最终结果宽度在每种情况下都会有所不同，但在大多数情况下大小约为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>