创建交互式博客——jquery （4）

最新推荐文章于 2017-10-16 14:18:48 发布

原创最新推荐文章于 2017-10-16 14:18:48 发布 · 599 阅读

0 ·

CC 4.0 BY-SA版权

网站专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用jQuery库为HTML元素添加动态效果。讲解了slideDown()方法用于向下滑动显示元素，slideUp()方法用于向上滑动隐藏元素，以及.animate()方法如何自定义复杂的动画效果，包括通过指定CSS属性和时间参数来实现元素的翻转等交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery可以是html element具有动感。

slideDown()方法通过向下滑动的方式显示选定的html element；slideDown(600)表示下一张图片在600ms内向下滑动。代码如下：

$('body').click(function() {
  $('.slide').slideDown(600).addClass('active-slide');
});

slideUp()方法通过向上滑动的方式隐藏选定的html element。代码如下：

$('body').click(function() {
  $('.slide').slideUp(600).addClass('active-slide');
});

fadeIn()方法通过渐进的方式显示选定的html element。代码如下：

$('body').click(function() {
  $('.slide').fadeIn(600).addClass('active-slide');
});

fadeOut()方法通过渐出的方式隐藏选定的html element。

$('body').click(function() {
  $('.slide').fadeOut(600).addClass('active-slide');
});

.animate()方法可以自定义动画。通过指定的CSS property在一定的时间内改变可以使html element动起来。animate()方法有两个参数：一是一组CSS properties，二是时间参数。

$('.icon-menu').click(function() {
  $('.menu').animate({
      width: "193px"
    },
    300);
});

比如，实现下面页面的翻转，当单击左边或者右边的arrorw时，可以实现内容和小圆点的翻页。

代码如下：

var main = function() {
    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
        });
        
    // Click the next arrow
    $('.arrow-next').click(function() {
        // move to the next slide.
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
        // move to the next dot.
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();
        
        if (nextSlide.length === 0) {
            nextSlide = $('.slide').first(); // go back to the first slide.
            nextDot = $('.dot').first();
            }
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');    
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
        });
        
    // Click the previous arrow
    $('.arrow-prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();
        if (prevSlide.length === 0) {
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
            }
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
        });
    
    };
$(document).ready(main);