标签: jquery-animate

链接在jQuery中非常棒,但它链接了每个事件的触发器,并且不会等待前一个事件完成.这在动画制作时很明显.

因此,我看到的解决方法是使用回调函数.唯一的缺点是,比方说,你有4件事要连续动画.

不可否认,这可能是你不想经常做的事情,但是当你这样做时,标记似乎有点冗长.示例(伪代码):

element.animate(fast, callBackFunction1(element1,element2,element3);

function callBackFunction1(element1,element2,element3){
    element1.animate(fast, callBackFunction2(element2,element3));
};

function callBackFunction2(element2,element3){
    element2.animate(fast, callBackFunction3(element3));
};

function callBackFunction3(element3){
    element3.animate(fast);
};

在那种情况下,这是最好/最简洁的方式吗？

我有一个UL列表,如:

<ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
</ul>

我想将此列表用作动画JQuery菜单.以这样的方式设置:如果用户单击menu3,它将成为列表中的第一个项目,因为menu1和menu2会附加到结尾.

所以在点击menu3后,ul看起来像这样:

<ul>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
  <li>menu1</li>
  <li>menu2</li>
</ul>

任何指导或建议将不胜感激.

我<div>在父母身边留下了两个人<div>.使用jQuery,div.will_slide_down将在某个时候向下滑动(使用$("div.will_slide_down").slideDown()).当它向下滑动时,其div.first高度也应该增加以同时匹配高度div.second.

我怎样才能做到这一点？

 <div class="wrap">
      <div class="first" style="width: 200px; float: left;"></div>
      <div class="second" style="width: 700px; float: left;">
           <p>BlaBlaBla</p>
           <div class="will_slide_down" style="display: none">Some hidden text</div>
      </div>
 </div>

我能想到的唯一方法是slideDown在div.second完成时运行一个函数,但这会弄乱布局.它应该同时发生.

我希望有人可以帮助我使用以下脚本:

jQuery(document).ready(function($) {
  $(".infoBoxBtn a").click(function(e){
      e.preventDefault();
      $("#info-box").animate({marginTop: '67px'}, 2000, 'easeOutBounce');

      $(".infoBoxBtn a").addClass("active");
  });

  $(".infoBoxBtn a.active").click(function(e){
      e.preventDefault();
      $("#info-box").animate({marginTop: '-434px'}, 2000, 'easeOutBounce');

      $(".infoBoxBtn a").removeClass("active");
  });

});//end

这是我在Safari中遇到的错误:

TypeError: 'undefined' is not a function (evaluating 'f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration)')

我在jQuery API网站上读过关于jQuery Animate的文章,我不知道我在这里做错了什么.

谢谢!:)

如何使用jQuery和/或CSS完成增长/缩小动画？我能想到的一个例子是这样,当你点击Join Now按钮.

我查看了animate.css,但他们没有提供这样的动画.

我有一个包含在a中的单词列表<div>,<div>溢出被设置为隐藏,因此一次只显示一个列表项.我希望每个列表项逐个向上滑动,但不使用该.slideUp()功能.我希望它看起来像一个人从顶部移开,另一个从底部出现.我还希望列表项循环.

这是我的HTML:

<div class="band_ticker">
        <ul id="slide">
            <li><h2 class="band">BAND</h2></li>
            <li><h2 class="band">PARTY BAND</h2></li>
            <li><h2 class="band">COPORATE EVENTS</h2></li>
            <li><h2 class="band">WEDDINGS</h2></li>
            <li><h2 class="band">FUNCTION BAND</h2></li>
            </ul>
    </div>

我可以通过向上设置每个项目的动画来编写jQuery代码以帮助循环这些代码吗？

所以，我在这个页面上有几个不同的进度条 - http://kaye.at/play/goals

这是我的 HTML 和 CSS：

<div class="meter"><span style="width: 100%;"></span></div>


.meter { 
height: 5px;
position: relative;
background: #f3efe6;
z-index: 0;
margin-top: -5px;
overflow: hidden;
}

.meter > span {
z-index: 50;
display: block;
height: 100%;
background-color: #e4c465;
position: relative;
overflow: hidden;
}

我想简单地为进度条设置动画，使其从 0% 缓慢上升到它所处的任何百分比，而不是仅仅出现在那里，但我想以最简单的方式进行。我最好的选择是什么，我正在使用的当前代码是否可能？

我想要从0%到100%的高度设置菜单(DIV)的动画,反之亦然.该隐藏菜单代码工作.但是,显示菜单代码简单地在元素中淡化,高度为100%.我希望它从0%增长到100%.关于如何解决这个问题的任何想法？我是JQuery的新手.

的JavaScript/JQuery的

$(document).ready(function(e) {
    $('#mobileMenu-icon').click(function(){
        if ($('.LEFTNAV-content').hasClass("hide-menu")){
        // Show menu
            $('.LEFTNAV-content').animate({'height':'100%'}, {queue: false});
            $('.LEFTNAV-content').fadeIn('normal');
            $('.LEFTNAV-content').removeClass('hide-menu');
            $('.LEFTNAV-content').addClass('show-menu');
        }
        else{
        // hide menu
            $('.LEFTNAV-content').animate({'height':"1px"}, {queue: false});
            $('.LEFTNAV-content').fadeOut('normal');
            $('.LEFTNAV-content').removeClass('show-menu');
            $('.LEFTNAV-content').addClass('hide-menu');
        }
    })
});

CSS

.column-wrapper{ height: auto; }

.LEFTNAV-content{
    display:none; 
    overflow: hidden;
}
.hide-menu{ display: none; }

.show-menu{
    display: block;
    height: 1px;
}
.box1{
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
}
.innerBox1{
    height: auto !important;
    max-height: none !important;
    min-height: 50px;
}

HTML

<div class="column-wrapper">

    <div class="LEFTNAV-content">
        <div …

HTML:

<div id="box0"><img src="http://s14.postimg.org/9x1nrefy5/A_Sunday_on_La_Grande_Jatte.png" id="pic0"></div>
<div id="box1"><img src="http://s14.postimg.org/hbqzjs1tp/starry_night.png" id="pic1"></div>
<div id="box2"><img src=http://s14.postimg.org/x7ftn2se5/mona_lisa.png" id="pic2"></div>
<div id="box3"><img src="http://s14.postimg.org/k4k73t265/the_scream.png" id="pic3"></div>  

CSS:

        * {
            padding: 0px;
            margin: 0px;
            z-index: 0;
        }
        img {
            position: relative;
        }
        div {
            position: absolute;
            overflow: hidden;
            border: 8px solid #61260D;
        }
        #box0 {     /* A Sunday on La Grande Jatte */
            height: 150px;
            width: 120px;
            top: 300px;
            left: 100px;
        }
        #pic0 {
            left: -15px;
            top: -15px;
            height: 337px;
            width: 500px;
        }
        #box1 {     /* Starry Night */
            height: …

在过去的几个小时里,我试图完成以下任务:

在UICollectionview中,当我突出显示(向下触摸)一个单元格时,我希望它向内反射几个像素(更小的尺寸)并在释放时弹回到原始大小.

这是我到目前为止所尝试的:

override func collectionView(collectionView: UICollectionView,
didHighlightItemAtIndexPath indexPath: NSIndexPath) {


    collectionView.collectionViewLayout.invalidateLayout()
    let cell = collectionView.cellForItemAtIndexPath(indexPath)
    UIView.transitionWithView(cell!, duration: 1, options: UIViewAnimationOptions.CurveEaseIn, animations: {

        let center = cell?.center
        let frame2 = CGRect(x: 0, y: 0, width: 50, height: 50)
        cell?.frame = frame2
        cell?.center = center!

        }, completion: nil)
}

(我从这个问题中找到了很多代码示例: UICollectionView:选择时动画单元格大小会发生变化,但这适用于单元格选择.不突出显示.)

所以在didHighlightItemAtIndexPath中我将突出显示的单元格设置为新的大小.大小设置正确但出现以下问题:1:它没有动画,2:它移动到位置(0,0)并动画回到中心位置.它根本不应该移动位置 - 只是尺寸.

我在Shazam应用程序中看到了这个效果以供参考.当您在歌曲名称下方的按钮上对一首歌曲进行shazam(或查看以前的shazamed歌曲)时,可以看到它.