javascript - Jquery 同时在两个单独的 div 中移动内容

Question

我正在(努力)使用 jsFiddle 来获取两个 div 来加载内容，并根据选择触发器激活 targetID 并向上滑入容器 div。

所以，我需要内容在左侧向上滑动，图片内容在右侧向上滑动。

我的内容 div 可以正常工作，但是当第二个函数触发以将图像 div 调高时，它会填充到左侧的内容 div，而不是右侧的图像 div。

感谢任何 jsFiddler 的帮助。 http://jsfiddle.net/3e5wb/6/

 $('#drop').on('change', function() {
 moveUpContent($("#container"), $("#content"+this.value), 1000);
 moveUpImage($("#imgContainer"), $("#image"+this.value), 1000);        


});

function moveUpContent(container, object, speed) {
    var speed = 500 || speed;
    $(".content").fadeOut('slow');
    object.show();
    container.css("position", "relative");
    object.css("position", "absolute");
    object.css("top", container.height() + "px");
    object.css("opacity", "0");
    object.animate({
        top: 42,
        opacity: 1
    }, speed);
}

function moveUpImage(container2, object2, speed2) {
    var speed2 = 500 || speed2;
    $(".imgMain").fadeOut('slow');
    object2.show();
    container2.css("position", "relative");
   object2.css("position", "absolute");
   object2.css("top", container2.height() + "px");
   object2.css("opacity", "0");

  object2.animate({
      top: 42,
     opacity: 1
  }, speed2);
}

提前致谢!

Answer 1

您的问题是图像实际上并未插入到正确的父元素中。这一行:

object2.show();

应该改成这样:

object2.show().appendTo("#imgContainer");

然后它在正确的元素中并正确显示。更新 fiddle :http://jsfiddle.net/3e5wb/7/

希望这对您有所帮助。

编辑:另一个小问题是图像的定位错误。在第二个函数中，这个:

top: 42,

应该更新:

top: 0,

使其与容器对齐。

编辑编号 2:根据评论，我再次更新了 fiddle (http://jsfiddle.net/3e5wb/13/) 以将 appendTo 添加到第一个函数 - 只是为了技术正确性。