Question

我使用jquery transit创建了这两个函数，这些函数用于在用户按下右侧或左侧按钮时将新的html块滑入页面。他们有时会工作。其他时候内容将加载，然后不会取消隐藏自己。因此它将被加载，您可以使用chrome检查它，并看到显示仍然设置为none。其他时候没有问题，它完全按照预期工作。页面上没有错误。实际上，页面上唯一的JavaScript是这个函数的几个不同版本，它们都加载了一个不同的页面并以某种形式滚动它。

我的问题是：我是否正在使用该功能从jquery Transit正确完成？我的功能是按预期工作还是我错过了一些很大的东西而且没有正确设置。

function ShowPartTiles_FromLeft() {
    $("#SeriesPartBrand").transition({
        opacity: 0,
        x: "1000px"
    }, 500, "out", function() {
        $("#SeriesPartBrand").transition({
            opacity: 0,
            x: "-1000px"
        }, 0, "out")
    }), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
        $("#SeriesPartBrand").transition({
            opacity: 1,
            x: "0"
        }, 500, "in")
    })
}

function ShowPartTiles_FromRight() {
    $("#SeriesPartBrand").transition({
        opacity: 0,
        x: "-1000px"
    }, 500, "out", function() {
        $("#SeriesPartBrand").transition({
            opacity: 0,
            x: "1000px"
        }, 0, "out")
    }), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
        $("#SeriesPartBrand").transition({
            opacity: 1,
            x: "0"
        }, 500, "in")
    })
}

Answer 1

jQuery中没有过渡功能，有一个动画。但我建议使用css3过渡属性：

#SeriesPartBrand {
    transition: all 0.5s;
}

function ShowPartTiles_FromLeft() {
     $("#SeriesPartBrand").css({opacity: 0, left: 1000});
     $("#SeriesPartBrand").off('transitionend').on('transitionend', function() {
         $("#SeriesPartBrand").css({opacity: 0, left: -1000});
         $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
            $("#SeriesPartBrand").css({opacity: 0, left: 0});
         });
     });
 }

这应该让你开始。也不要用第一个大写字母命名你的JS函数，不要这样说，名字看起来会更好：＆＃34; showPartTilesFromLeft（）＆＃34;。

html ID和类必须全部小写，单词用逗号分隔＆＃34; - ＆＃34;。

jQuery Transit功能完成

1 个答案: