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

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);