Question

我（努力）在jsFiddle上工作以获取两个div来加载内容，并基于select触发器来激活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");

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

希望这有帮助。

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

top: 42,

应该更新：

top: 0,

将其与容器对齐。

编辑编号2：继续发表评论后，我再次更新了小提琴（http://jsfiddle.net/3e5wb/13/），以便在第一个函数中添加appendTo - 只是为了技术正确性。

Jquery同时在两个独立的div中移动内容

1 个答案: