Question

I’m using jQuery to slide some random text. This text will appear when one puts mouse over image, but the image (which triggers the slide) does not go with this text – in my case is ‘plus image’. So let me explain on this example:

And I want it to be like this (plus goes with text at time of slide):

My code:

<div style="">
    <a href="java script:void(0)"><img style="float:left;" id="dodaj_obrazek_4" src="imgs/add.png" onmouseover="wys_obrazek(4)"></a>
    <div style="float: left; display: none;" id="dodaj_obr_4">
        <a onmouseout="sch_obrazek(4)" style="color:#414040;" href="java script:void(0)">Dodaj obrazek</a>
    </div>
</div>

Functions that trigger the slide:

function wys_obrazek(liczba) {
    if ($('#dodaj_obr_' + liczba).is(':hidden')) {
        $('#dodaj_obr_' + liczba).show('slide', {
            direction: 'right'
        }, 1000);
    }
}

function sch_obrazek(liczba) {
    if ($('#dodaj_obr_' + liczba).is(':visible')) {
        $('#dodaj_obr_' + liczba).hide('slide', {
            direction: 'right'
        }, 1000);
    }
}​

Answer 1

The reason is JQuery is animating them sequentially one option would be to wrap all components like so:

    <div style="width:500px; overflow:hidden;">
    <div id="dodaj_obrazek_wrap_4">
       <a href="java script:void(0)"><img style="float:left;" id="dodaj_obrazek_4" src="imgs/add.png"></a>
       <div style="float: left;" id="dodaj_obr_4">
          <a style="color:#414040;" href="java script:void(0)">Dodaj obrazek</a>
      </div>
   </div>
</div>​

Then the JQuery Changes to.

function wys_obrazek(liczba) {
    var item = $('#dodaj_obrazek_wrap_' + liczba);
    if (item.is(':hidden')) {
        item.animate({
      marginLeft: parseInt( item.css('marginLeft'),10) == 0 ?
            item.outerWidth() : 0 });
    }
}

function sch_obrazek(liczba) {
    var item = $('#dodaj_obrazek_wrap_' + liczba);
    if (item.is(':visible')) {
       item.animate({
      marginLeft: parseInt( item.css('marginLeft'),10) == 0 ?
        item.outerWidth() : 0
    });
    }
}

As an example see here

UPDATE

I could not find reference of using slide in hide/show so I added one myself.