-3

jQuery を使用して、ランダムなテキストをスライドさせています。このテキストは、マウスを画像の上に置くと表示されますが、画像 (スライドをトリガーする) はこのテキストと一致しません。私の場合は「プラス画像」です。それでは、この例で説明しましょう。

そして、私はそれを次のようにしたいです（さらに、スライドの時点でテキストと一緒に行きます）：

私のコード:

<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>

スライドをトリガーする関数:

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);
    }
}​
4

1 に答える 1

0

その理由は、JQuery がそれらを順番にアニメーション化するためです。1 つのオプションは、次のようにすべてのコンポーネントをラップすることです。

    <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>​

次に、JQuery は次のように変更されます。

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
    });
    }
}

例として、こちらをご覧ください

アップデート

非表示/表示でスライドを使用する参照が見つからなかったので、自分で追加しました。

于 2012-11-23T15:10:54.663 に答える