0

所以这是我的问题或问题。我编写了下面的 jQuery 代码，它的工作是加载新页面内容，用幻灯片对其进行动画处理，将旧内容滑出，然后销毁旧内容。

我对 jQuery 很陌生，因为我是作为设计师而不是开发人员接受培训的，所以请原谅任何不正确的事情，但我为我迄今为止的想法感到非常自豪。

我的目标是能够以不同的方向将内容滑入和滑出，目前始终是从右到左。我的问题是，如果不为每个方向创建新变量，我看不到如何做到这一点，这将是 8 个不同的“clickAnimation”变量，在我看来太多了。

var clickAnimation = function() {
    $(document).on('click', linkLeft, function(e) {
        var url = $(this).attr('href');
        e.preventDefault();
        $('body').append('<div id="new_wrapper"></div>');
        $('#new_wrapper').load(url + ' #wrapper', function(){
            $('#new_wrapper').animate({
                left: '0'
            }, 550).width(windowWidth);
            $('#wrapper').animate({
                left: '-100%'
            }, 550, destroyWrapper).width(windowWidth);
        });
    });
};
clickAnimation();

您可以在这里查看在我的网站上运行的 jQuery 代码。

我的想法基本上是我想在 animate 函数中添加某种 var ，以便我可以指定方向和值。我对我正在寻找的东西的想法如下，虽然不正确。

$('#new_wrapper').animate({
        directionNew, valueNew
    }, 550).width(windowWidth);
    $('#wrapper').animate({
        DirectionOld, valueOld
    }, 550, destroyWrapper).width(windowWidth);
clickAnimation(directionNew:, 'valueNew', directionOld:, 'valueOld');

我不需要把整件事都说清楚，尽管那永远不会受到伤害。我真的只是在寻找有关如何在这里创建更正确的 jQuery 导航/动画以及将来如何更正确地执行代码的方向。

感谢您的所有帮助，请原谅我，网站上有类似的东西，我找不到。

4

2 回答 2

0

那么第一件事是你有你的处理程序附件都绑定在你想要反转这些的函数中，所以变量在函数内部执行并且处理程序调用函数。所以本质上：

$(document).on('click', selector, function (e) {
  var url = $(this).attr('href'),
      // this object (also sometimes called a hash will become the
      // options variable inside of the clickAnimation function.
      // it contains the exact spec. object for jQuery.animate in 
      // the "new" and "old" keys which will be passed as arguemnts
      // directly to the jQuery.animate calls on the #wrapper and #new_wrapper
      // elements. while "url" will be used in the jQuery.load call
      clickargs = {
          "old": { left: '-100%'}, 
          "new": { left: 0 },
          "url": url
      };

  e.preventDefault();

  clickAnimation(clickargs);
});

然后您的点击动画功能将类似于：

function clickAnimation(options) {
        $('body').append('<div id="new_wrapper"></div>');
        $('#new_wrapper').load(options.url + ' #wrapper', function(){
            $('#new_wrapper').animate(options.old, 550).width(windowWidth);
            $('#wrapper').animate(options.new, 550, destroyWrapper).width(windowWidth);
        });
}

您可以对其进行更多参数化并使其更加通用，但您明白了......我也无法治愈您计算windowWidth和设置的位置destroyWrapper，但您需要确保在内部配置它们clickAnimation或通过options散列传递它们.

于 2013-05-15T01:34:23.527 回答
0

例如，我的建议是使用 javascript 对象定义方向

var toLeft = {
  old_left:'100%',
  new_left:0
  old_top:0,
  new_top:0
}

var toRight = {
  old_left:'-100%',
  new_left:0,
  old_top:0,
  new_top:0
}

var toTop = {
  old_left:0,
  new_left:0,
  old_top:'100%',
  new_top:0
}

var toBottom = {
  old_left:0,
  new_left:0,
  old_top:'-100%',
  new_top:0
}

然后给链接一个定义即将到来的内容的方向的类。

<a href="labors.html" class="internal toBottom">Labors</a>

在那之后，你需要让你的脚本决定走哪条路

var clickAnimation = function() {
    $(document).on('click', linkLeft, function(e) {
        var $this = $(this)
        var url = $this.attr('href');            
        e.preventDefault();

        var direction = null;
        if($this.hasClass('toLeft')) 
          direction = toLeft;
        else if($this.hasClass('toRight')) 
          direction = toRight;
        else if($this.hasClass('toTop')) 
          direction = toTop;
        else if($this.hasClass('toBottom')) 
          direction = toBottom;
        //...same with other classes

        $new_wrapper = $('<div id="new_wrapper"></div>');
        //initial position of new content
        $new_wrapper.css({top:direction.old_top,left:direction.old_left});
        $('body').append($new_wrapper);
        $('#new_wrapper').load(url + ' #wrapper', function(){

            $('#new_wrapper').animate({

                top:direction.new_top,
                left:direction.new_left

            }, 550)
            .width(windowWidth);

            $('#wrapper').animate({

                top:'-'+direction.new_top,
                left:'-'+direction.new_left

            }, 550, destroyWrapper)
            .width(windowWidth);

        });
    });
};
于 2013-05-15T01:47:44.153 回答