// 点击...显示更多内容
$(document).ready(function() {
$('p:eq(1)').hide();
$('span.more').click(function(){
// show和hide会同时修改高度和不透明度。
$('p:eq(1)').show('show');
$(this).hide();
});
});
// 放大缩小文字
$(document).ready(function() {
$('div.button').click(function(){
var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
var num = parseFloat(currentSize);
// 截取currentSize的最后两位。
var unit = currentSize.slice(-2);
if(this.id == "switcher-large"){
num *= 1.4;
}else if(this.id == "switcher-small"){
num /= 1.4;
}
$speech.css('fontSize', num + unit);
});
});
// button移动的效果
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').width();
var $button = $('div.button');
var buttonWidth = $button.width();
var paddingRight = $button.css('paddingRight');
var paddingLeft = $button.css('paddingLeft');
var borderLeftWidth = $button.css('borderLeftWidth');
var borderRightWidth = $button.css('borderRightWidth');
var totalButtonWidth = parseInt(buttonWidth, 10) + parseInt(paddingLeft, 10) + parseInt(paddingRight, 10) + parseInt(borderLeftWidth, 10) + parseInt(borderRightWidth, 10);
var rightSide = paraWidth - totalButtonWidth;
// 四个参数:1 包含样式属性及值的映射
// 2 可选的速度参数
// 3 可选的缓动(easing)
// 4 可选的回调函数
$button.animate({'left':rightSide, height:38}, 'slow');
});
});
// 并发和排队效果,处理一组元素
// 排队不适于非效果方法,不如css();
$(document).ready(function() {
$('h2').click(function(){
$('div.button')
.fadeTo('slow', 0.5)
.animate({left:650}, 'slow')
.fadeTo('slow', 1.0)
.slideUp('slow');
});
});
// 并发和排队效果,处理多组元素
$(document).ready(function() {
$('p:eq(3)').css('backgroundColor', '#fcf').hide();
$('p:eq(2)').css('backgroundColor', '#cff').click(function() {
// 这样写,第2段消失和第3段出现,是同时进行的
//$(this).slideUp('slow').next().slideDown('slow');
// 通过回调方法,实现排队效果
var $thisPara = $(this);
$thisPara.next().slideDown('slow', function(){
$thisPara.slideUp('slow');
});
});
});
// Make clickable elements appear so on hover.
$(document).ready(function() {
$('h2, div.button, div.label, span.more, p:eq(2)').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
Jquery 样式和效果
最新推荐文章于 2023-03-28 14:14:30 发布