Results 1 to 2 of 2

Thread: I am trying to .slideUp()

  1. #1
    Join Date
    Jul 2010

    I am trying to .slideUp()

    I I am tryint to .slideUp() with Jquery, but have some problems with it.

    Anybody helps?

    To explain I will simplify the problem as possible:

    I have a code, where is a few divs:

    HTML Code:
    <div id=div1><img scr...></div>
    <div id=div2 onmouse='move image into div#3' onmouseout='some function'>some element here</div>
    <div id=div3></div>
    <div>...other text and code... </div>
    Image from div1 I want to move when mouse cursor is over div2. It moves to div3. When I go away with cursor so onmouseout event runs a function where is .slideUp() to decrease div3 height to 0px. Then to move the image. OR variant: first to move image then to slideUp the div. But the first case would be enough.

    $("div#div1").slideUp(5000); // to decrease the height of div3
    $("div#div2").append($("img#image")); // to move the image in
    Here I have some problems:

    1) slideout does not work on the link:

    2) if it would work on the link, then when I go over div2 so image appears on the place div3 but it immediately slideUp instead waiting till I go away with mouse cursor.

    3) when I go to the area div2 again so image should be there but it it not. I think maybe the div3 keeps the 0th height or is display:none?

    I hope somebody helps with this.

    I you would have problem to see the code on link so here it is:

    <div id="img_top" class="img right"><img id="image"
    src="http://nd03.jxs.cz/197/618/961b9096b1_56269761_o2.jpg" width=60px></div>
    <div id=div_id onmouseover='$("div#img_id").append($("img#image"));'
    <textarea id=id cols="2" rows="1">321545465231313541</textarea>
    <div id=img_id>.</div>
    JS with JQUERY:
    var divHeightAnimate = function (col){
    $("div#img_"+col).append($("img#image")); // přesuň obraz zpět
    Last edited by crazy boy; 09-09-2011 at 11:11 AM.

  2. #2
    Join Date
    Jul 2010
    I have tested this code in html kit with bigger textarea there:
    <textarea id=id cols="100" rows="15">321545465231313541</textarea>
    and it slidesUp (point #1 and #2 is all right). But problem is at point #3 - you cannot repeat that

    I have succeed to solve this problem:

      var divHeightAnimate = function (col){
    //    $("div#img_top image").append($("img#image"));
    So the problem is, that after the slide is done, the element stay as display:none; instread display:block.

    Although I would like to add one more thing which I don't know how to do. I Would it be possible to have some mechanism how to stop animating when I call onmouse event on div2??

    I'd be interested if this thing is possible to do with this
    That would be better (but does not work for me) without setting css property display.
    Last edited by crazy boy; 09-09-2011 at 12:11 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center