Javascript Jquery附加css

我正在尝试制作一个简单的图像缩放脚本

问题在于，只有在第二次[data onclick=zoom]单击后，页边距样式才会应用

为什么会这样

$('a[data-onclick="zoom"]').click(function () {
   $('body')
       // append complete
       .append('<div id="image-zoom"><span id="close"></span><img src="http://samurai.releasetracker.ru/media/images/movie/original/jCH93cL8b6uYVK9jWs6xw3IvQbA_1.jpg"></div>')
       // find last appended div
       .find('#image-zoom:last')
       // giving CSS
       .css({
         'margin': '-' + ($('#image-zoom > img').height() / 2) + 'px 0 0 -' + ($('#image-zoom > img').width() / 2) + 'px'
       });
   return false;
});

笔记

---

您正在使用图像缩放作为id，但如果要将相同id的多个项目更改为类，因为多个元素的相同id是不允许的。

我会尝试其他方法，例如：

  $("a[data-onclick='zoom']").click(function() {

    // remove if exists
    if($(".image-zoom").length > 0)
      $(".image-zoom").remove();

    // add image
    $("<img />", { 
      "src": $(this).attr("data-image"), 
      "class": "image-zoom" }).appendTo("body");

    // get image size
    var h = $(".image-zoom").height(),
        w = $(".image-zoom").width();

    //animate
    $(".image-zoom")
      .css({
        "height": 0
      })
      .animate(
      {
        "opacity": 1,
        "height": h
      }, 1000);

      return false;
  });

在HTML中，您将有：

<a href="#" 
   data-onclick="zoom" 
   data-image="http://samurai.releasetracker.ru/media/images/movie/original/jCH93cL8b6uYVK9jWs6xw3IvQbA_1.jpg"
   >click</a>

这是一本书

---

如果，正如我在评论中所说的，这就是你想要实现的…

我使用的是Chrome，而我所能看到的只是隐藏/显示图像行为，那么你提到的缩放是什么？我需要尝试不同的浏览器吗？有没有机会在图片中展示你想做什么？