Question

我希望在幻灯片，旋转，淡入淡出等页面加载之间产生过渡效果。我正在尝试使用以下代码完成此操作，但它无法正常工作。有什么想法吗？

$("asp:HyperLink.smoothlink").click(function (e) {
    $("body").addclass("fadeout");

    setTimeOut(function() {
        window.location = e.currentTarget.attributes['data-url'].value;
    },1000);
}

CSS

.fadeout
{
    opacity:0;
    transition :opacity 1s ease-in-out;
    -moz-transition-opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
}

Answer 1

据我所知，当您点击特定链接时，您正在尝试向当前页面添加动画。您似乎在.NET环境中工作，并且我对其WebControl不太熟悉，但是有几个错误突出：

您没有使用正确的选择器字符串 - asp:HyperLink.smoothlink。请尝试使用a.smoothlink代替。
JavaScript区分大小写，因此addclass和＆＃39; setTimeOut are causing an error. Try using 'addClass和setTimeout代替。
您可能还需要使用href属性而不是data-url，但这实际上取决于.Net控件生成的内容。

以下是我认为您正在尝试做的一个工作示例：

HTML：

<a href="http://stackoverflow.com" class="smoothlink">example link</a>

CSS：

.fadeout {
    opacity:0;
    transition :opacity 1s ease-in-out;
    -moz-transition-opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
}

JavaScript的：

$(document).ready(function () {
    $("a.smoothlink").click(function (event) {
        event.stopPropagation();
        $("body").addClass("fadeout");
        setTimeout(function () {
            window.location =  $(event.currentTarget).attr('href');
        }, 1000);
    });
});

在页面加载之间转换

1 个答案: