PDF《在按钮上附加 hover 效果》

3 width: '100%' }, duration, 'easeOutQuad');

}) .on('mouseleave', function(){ $(this).find('> span').stop(true).animate({ width: '0%' }, duration, 'easeOutQuad');

});

});

JavaScript 第3列按钮的 JavaScript main.js find('限缩选择器') 语法 find() 方法 height: 80px;

line-height: 80px;

color: #fff;

background-color: #ae5e9b;

border-radius: 20px;

}

1 JavsScript 中要对设定 overflow:hidden;

的元素以动画控制其宽度 . 请开启 main.js 并在第

2 列按钮的程式新增下面程式 . 上面程式用到一个新方法 find()?3 , 其功能为 「以选择器条件对 jQuery 物件 各元素之子元素为对象进行限缩」 . 例中的 find() 方法设定 span 元素做为参数, 限定处理对象为 「重叠的按 钮」 (span 元素内的按钮). $() 函式和 find() 方法 的差异 $() 是以选择器针对 HTML 文件整体限缩元素, 而find() 方法则是对 jQuery 物 件的子元素做限缩.请比较下面各种写法, 其变数中所放的 jQuery 物件都是相同的. Point! var same1 = $('#buttons1 button > span');

var same2 = $('#buttons1 button').find('> span');

var same3 = $('#buttons1').find('button').find('> span');

JavaScript 元素限缩方法的差异 这样藉由改变 on() 方法与 animate() 方法的处理对象就可以实作横向色块 滑动的动画效果.另外要注意的就是方法链中如果使用 find() 方法, 则find() 方 法前后所处理的元素对象是不同的.