jQuery Transit 函数完成答案

【问题标题】：jQuery Transit Function CompletejQuery Transit 函数完成
【发布时间】：2014-09-11 13:34:49
【问题描述】：

我使用 jquery transit 创建了这两个函数，旨在当用户按下右或左按钮时将新的 html 块滑入页面。他们有时会工作。其他时候，内容会加载，然后不会自行取消隐藏。所以它会被加载，你可以用 chrome 检查它，看到显示仍然设置为无。其他时候没有问题，它完全按照预期工作。页面上没有错误。页面上唯一的 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")
    })
}

【问题讨论】：

标签： javascript jquery jquery-plugins jquery-transit

【解决方案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 函数，不要这样，名字看起来更好：“showPartTilesFromLeft()”。

并且 html ids 和 classes 必须全部小写，单词之间用逗号“-”隔开。

【讨论】：