CODEWITHSUNDEEP
javascriptjquerycss
Scott Fleming
Scott Fleming

Reputation: 451

Jquery moving content in two seperate divs simultaneously

I am (struggling) to work on a jsFiddle to get two divs to load content, and based on a select trigger, to activate the targetID and slide up into the container div.

So, I need the content to slide up on the left side, and the image content to slide up on the right side.

I have the content div working, but when the 2nd function fires to bring the image div up, it populates in the left content div, not the right image div.

Any jsFiddler help is appreciated. 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);
}

Thanks in advance!

Upvotes: 1

Views: 189

Answers (1)

ArtOfCode
ArtOfCode

Reputation: 5712

Your problem was that the images were not actually being inserted into the correct parent element. This line:

object2.show();

should be changed to this:

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

Then it's in the right element and displays right. Updated fiddle: http://jsfiddle.net/3e5wb/7/

Hope this helps.

EDIT: As another slight problem, the positioning of the images was wrong. In the second function, this:

top: 42,

should be updated:

top: 0,

to position it in line with the container.

EDIT NUMBER 2: Following on from a comment, I have updated the fiddle again (http://jsfiddle.net/3e5wb/13/) to add an appendTo to the first function as well - just for technical correctness.

Upvotes: 2

Related Questions