-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 正在按顺序对它们进行动画处理，一种选择是像这样包装所有组件：

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