RSS
 

jQuery 鼠标经过动画

18 Sep

现在觉得， jQuery 实在是一个不可多得的好东西。正如 jQuery.com 上面说的： Write Less, Do More.

其实对于 javascript 和 web 设计我就一个不折不扣的门外汉。但是学过蹩脚的 C 语言，所以看到一些代码的时候倒是也能对其作用心领神会。加上一点点探索的精神的不断的尝试，我倒是也能作出来一些让我自己兴奋不已的效果出来。

查看效果页

jQuery 代码在这里：

$(document).ready(function(){
		    $('.slide').mouseover(function(){
			    $(this).animate({"width":"300px"});
		    }).mouseout(function(){
			    $(this).animate({"width":"80px"});
		    });
	    });

主要就是mouseover(鼠标经过)的时候，把鼠标所在的 div 的宽度以动画的方式变成 300px
在mouseout(鼠标离开)的时候，把同样一个 div 的宽度变回 80px

值得参考的文章是
Sweet Titles for jQuery (美妙的标题提示) !

 
7 Comments

Posted in web

 

Tags: ,

Leave a Reply

 
Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).
 
 
 

  1. Leeiio

    September 18, 2009 at 3:40 pm

    配合jquery的easing插件可以實現抖動效果哦，可以看我博客的頂部導航“關閉側邊欄”~

    ReplyReply
     

  2. Ethan

    September 18, 2009 at 3:41 pm

    @Leeiio
    哈哈 抖动那个我知道的～ 但是一直没用呢。。。

    ReplyReply
     

  3. echo

    September 18, 2009 at 9:34 pm

    我是来学习的

    ReplyReply
     

  4. cdds

    September 18, 2009 at 11:46 pm

    效果不错啊～

    ReplyReply
     

  5. Ethan

    September 19, 2009 at 12:29 pm

    @echo 嘿嘿…… 不是很难～～

    @cdds 您老也可以自己试试呀 不难的

    ReplyReply
     

  6. nuodou

    October 15, 2009 at 12:25 pm

    不错啊，可以实现轮换flash效果了

    ReplyReply
     

  7. Ethan

    October 15, 2009 at 12:32 pm

    @nuodou 哈哈 多亏强大的 jQuery 呀

    ReplyReply