divをマウスクリックで幅を広げる(外側にスライドさせる)方法

私は、現在の幅(400ピクセル)から指定された幅まで、クリックするとdivを右に拡大したい。 (divには写真が背景として表示されるため、最終結果の幅はそれぞれ異なる場合がありますが、ほとんどの場合約1000ピクセルになります)。

どうすればjquery/javasciptでこれを行うことができますか?ありがとう

0
追加された 著者 slapthelownote,

2 答え

定義された幅:

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

Checking the width of the image (background):
See this fiddle: 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");   
}
2
追加された

Jqueryの使用

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

  <script>
  $("#box").one( "click", function() {
  $( this ).css( "width","+=200" );
  });
  </script>
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript