Как заставить div расширяться (сдвигаясь наружу) по ширине при щелчке мышью

Question

Я хочу, чтобы div расширялся вправо от его текущей ширины (400 пикселей) до определенной заданной ширины. (В элементах div есть фотографии в качестве фона, поэтому ширина конечного результата в каждом случае будет разной, но в большинстве случаев она будет около 1000 пикселей).

Как я могу сделать это с помощью 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>