Question

我正在尝试使用jquery脚本来模拟IE的CSS3过渡属性。该脚本有效，但在第一次悬停时不起作用。在第一次悬停时，它只是一个常规的悬停，改变图片而不是脚本，我无法弄清楚原因。任何帮助将不胜感激。

$(document).ready(function() {
$("img").hover(function() {
  $(this).stop().animate({opacity: "0"}, 'slow');
},
function() {
  $(this).stop().animate({opacity: "1"}, 'slow');
});

}）;

这是html

<ul id="gallery">

        <li class="engagement">
            <a
                href="engagements.html"
                style="background-image:url(Images/engagement2-small.jpg);"
            >
                <img
                    src="Images/engagement-small.jpg"
                    alt="Couple getting engaged"
                />
                Engagement Photos
            </a>
        </li>

        <li class="weddings">
            <a
                href="weddings.html"
                style="background-image:url(Images/wedding2-small.jpg);"
            >
                <img
                    src="Images/wedding-small.jpg"
                    alt="Couple at wedding"
                />
                wedding photos
            </a>
        </li>

        <li class="family">
            <a
                href="family.html"
                style="background-image:url(Images/family2-small.jpg);"
            >
                <img
                    src="Images/family-small.jpg"
                    alt="Young girl Posing for Family Photo"
                />
                family photos
            </a>
        </li>

        <li class="seniors">
            <a
                href="senior.html"
                style="background-image:url(Images/senior2-small.jpg);"
            >
                <img
                    src="Images/senior-small.jpg"
                    alt="Young Woman Posing for Yearbook Photo"
                />
                senior portraits
            </a>
        </li>

        <li class="corporate">
            <a
                href="corporate.html"
                style="background-image:url(Images/corporate2-small.jpg);"
            >
                <img
                    src="Images/corporate-small.jpg"
                    alt="Employees in Company Dresswear"
                />
                corporate photos
            </a>                 
        </li>

    </ul>

这里是CSS虽然它在IE中不起作用

#gallery img {
    border:1px solid #E4E3E2;
    -moz-transition:opacity 0.5s ease-in-out;
    -webkit-transition:opacity 0.5s ease-in-out;
    -o-transition:opacity 0.5s ease-in-out;
    -ms-transition:opacity 0.5s ease-in-out;
    transition:opacity 0.5s ease-in-out;
}

#gallery a:focus img,
#gallery a:hover img {
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity=0);
}

Answer 1

如果不显示更多代码（无论是通过Ajax等进行导航），很难知道自己在做什么。

您可以尝试使用：

$('.page-class').live("pageshow", function() {
    // stuff
}

JQuery动画脚本不能马上工作

1 个答案: