jquery animate step 實現 transform css3方法

阿新 • • 發佈：2019-01-14

利用jquery animate step 實現 translate(), rotate(), scale(), skew(),等開發方法

animate()方法有個step引數規定動畫執行的每一步都要執行step這個回撥函式。

我們可以用使用一個不影響元素效果顯著的css值來觸發animate()開發方法，然後在step回撥函式中修改我們想要修改的值，這樣就可以間接地實現動畫了

例項：

<style type="text/css">
    .demo{width: 100px;
        height: 100px;
        border: 1px solid red 
}
</style>
<body>
    <div class="demo"></div>
    <button>sss</button>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    $("button").click(function(){
        $(".demo").animate({
            aa:"360" //目的就是取一個屬性值360 

        },{
            step:function(now,fx){
                //console.log(now);
                $(".demo").css({"transform":"rotate("+now+"deg)"})
            },
            duration:1000
        });
    })
</script>

<script>
    $(".demo").animate({
        aa:2,
        bb:10
    }, {
        step:function 
(now,fx){
        //引數step：規定每個動畫的每一步完成之後要執行的函式
            // now:是當前動畫正在改變的屬性的實時值；
            // fx: jQuery.fx 原型物件的一個引用,其中包含了多項屬性,比如
            // 執行動畫的元素：elem;
            // 動畫正在改變的屬性：prop;
            // 正在改變屬性的當前值：now;
            // 正在改變屬性的結束值：end;
            // 正在改變屬性的單位：unit;等

            // 可在這裡改變animate第1個引數中設定的屬性bb在動畫結束時的值
            if(fx.prop=="bb"){fx.end=5}
            //console.log(fx.prop+": "+n);
        },
        duration:1000
    })
</script>

jquery animate step 實現 transform css3方法

利用jquery animate step 實現 translate(), rotate(), scale(), skew(),等開發方法 animate()方法有個step引數規定動畫執行的每一步都要執行step這個回撥函式。我們可以用使用一個不影響元

jquery animate step實現css3屬性動畫

jquery animation的工作原理是通過將元素的css樣式從一個狀態改變為另一個狀態。css屬性值是逐漸改變的，這樣就可以建立動畫效果。但是animate方法下，只有數字值可建立動畫（比如 “top:30px”），字串值型別的值則是無法建立動畫（比

jquery animate step用法

jQuery基於json與cookie實現購物車的方法

構造 exp als com else cookies 一個可選參數 int /** * 添加商品及數量到購物車cookie中,返回當前商品在cookie中的總數 */ function AddToShoppingCar(id, num, t

前端動畫實現一——css3的animation、transition和transform

1.animation：哪個動畫，動畫過程 @keyframes 建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。針對的是一套樣式整體，transition是針對某些屬性所有變化。 .load-border { width: 120px; h

jQuery使用JSONP實現跨域獲取資料的三種方法詳解

本文例項講述了jQuery使用JSONP實現跨域獲取資料的三種方法。分享給大家供大家參考，具體如下：第一種方法是在ajax函式中設定dataType為'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a

54 jQuery-animate（）方法移動位置

1.效果圖 2.HTML程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>53 jQuery-animate（）方法移動位置&

53 jQuery-animate()方法

1.效果圖 2.HTML程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>53 jQuery-animate()方法</

一、jQuery小程式之jQuery效果顯示和隱藏 fading方法滑動方法 animate()動畫方法 chaining

隱藏和顯示： <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="htt

關於JQuery animate()方法

html: <button>點選我</button> <p>如果你想在一個涉及動畫的函式之後來執行語句，請使用callback函式</p> <div class="panel"></d

jquery Autocomplete 實現自動補全(四)解決jquery 高版本不支援browser方法

解決jquery 高版本不支援browser方法前幾篇的例子是在 jquery 版本1.7.1 下使用的都沒問題，但最近在我們的專案中jquery版本換成了 1.9 ，執行後發現不能實現自動補全功能了。後來在網上找了很多資料，才發現 juqery

Asp.net基於session實現購物車的方法

lai 程序 clas contain ext info border mode man 本文實例講述了asp.net基於session實現購物車的方法。分享給大家供大家參考，具體如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

JQuery系列（4） - AJAX方法

type 一般來說其他 don light spa none rouge 狀態信息 jQuery對象上面還定義了Ajax方法（$.ajax()），用來處理Ajax操作。調用該方法後，瀏覽器就會向服務器發出一個HTTP請求。 $.ajax方法 $.ajax()的用法主要

j2ee監聽器的實現及配置方法

tin sta j2ee bsp 對象配置方法 clas http ont j2ee中存在的監聽器有八種，其中四種有關於session 可以分為以下幾類：生命周期類：監聽對象的創建和銷毀 Interface　　ServletRequestListener Interfa

使用jquery+ajax+php實現搜索框的功能

test .ajax 關鍵字焦點 pwd show span 知識庫 document 搜索框的原理：客戶端：輸入要搜索的關鍵字於文本框，然後文本框將關鍵字獲取，使用ajax發送請求到服務端，然後根據服務端返回來的信息顯示到一個div中服務端：接收傳過來的數據，然後在

unity 2種實現動態障礙方法

必須 tar 模糊 ont 支持獨立 com new bst 此文將介紹2種實現動態障礙的方法，一種基於navmesh，一種基於astar算法。 1.基於navmesh。　　1.制作場景障礙：　　　　a.有幾個獨立的障礙物，就定義幾個user area，即，一個場景僅

jquery.form.js 實現異步上傳

llb element eth document == ctype tostring detail new 前臺： <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype

js 利用jquery.gridly.js實現拖拽並且排序

user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

Java多線程系列一——Java實現線程方法

多個 true dex extends nds one ash .get for Java實現線程的兩種方法繼承Thread類實現Runnable接口它們之間的區別如下： 1)Java的類為單繼承，但可以實現多個接口，因此Runnable可能在某些場景比Threa

一個在h5的canvas元素中畫撲克牌jquery插件實現

code isp arguments close tca func spa font blog 1 //非架構 2 ; (function ($) { 3 var aspect = 5.7 / 8.8;//撲克寬和高比例 4 function Paint

jquery animate step 實現 transform css3方法

利用jquery animate step 實現 translate(), rotate(), scale(), skew(),等開發方法

相關推薦