mouseenter 與 mouseover

條件:目標點為外層元素,mouseenter在內層裏移到子元素不會觸發,只有從別的元素移到目標點才會觸發;mouseover在內層移到任意子元素都會觸發;
原理:mouseenter 無冒泡機制,mouseover有冒泡機制

<style>
div{ width: 200px;}
.box,.box2{ background: #727272; color: #ffffff;}
.div,.div2{border:1px solid #cccccc;padding:15px;}
</style>
<div class="div">
<div class="box">0</div>
</div>
<div class="div2">
<div class="box2">0</div>
</div>
<script>
var i = 1;
var j = 1;
$('.div').mouseenter(function () {
    $('.box').html(i++)
})
$('.div2').mouseover(function () {
    $('.box2').html(j++)
})
</script>

mouseleave 與 mouseout 類似

hover方法用的是: mouseenter mouseleave方法,so,當需觸發hover方法第2個fn時,使用trigger('mouseleave');



事件對象:
1)e.type,獲取事件的類型:

$('#a').click(function (e) {
    e.preventDefault()
    console.log(e.type); // click
})

2)e.target 獲取觸發事件的元素;

$('#a').click(function (e) {
    e.preventDefault()
    console.log(e.target); 
//<a href="http://baidu.com" id="a">aaa</a>
})

3)e.relatedTarget
標準DOM發生元素可通過e.target訪問,相關元素通過e.relatedTarget訪問


对于"mouseenter"、"mouseover"等事件而言,relatedTarget属性返回被离开的DOM元素。

对于"mouseout"、"mouseleave"事件而言,relatedTarget属性返回被进入的DOM元素。

对于"focus"事件而言,relatedTarget属性返回失去焦点的DOM元素(如果有的话)。

对于"blur"事件而言,relatedTarget属性返回获得焦点的DOM元素(如果有的话)。

如果当前事件没有涉及到其他元素,则返回null或undefined(视情况而定)。

<script src="jquery-1.11.1.js"></script>
<style>
*{ margin: 0; padding: 0;}
.wrap{padding:10px;border:1px solid #ccc;}
.box,p{padding:20px;border:1px solid #ccc;}
</style>
<div class="wrap" id="wrap">
    wrap,父元素 id=wrap
    <div class="box" id="box">box相臨元素 id=box</div>
    <a href="#">綁定事件點a</a>
    <p id="p">p相臨元素 id=p</p>
</div>
<script>
$('a').bind('mouseout', function (e) {
console.log(e.relatedTarget.id);//離開a後到哪個元素即哪個元素
})
</script>

4)e.which
鼠標左中右及鍵盤鍵值

$('a').mousedown(function (e) {
    console.log(e.which);
})
$('a').keyup(function (e) { //获取键盘的按钮值
    console.log(e.which)
})
$('a').keyup(function (e) {
    console.log(e.metaKey); //按ctrl
})



1、事件綁定移除
bind、unbind、one、on、off、delegate、undelegate
2、常用模擬
trigger(type,[data]);可傳參;

$('.a').bind('myClick', function (elem,n1,n2) {
    alert(n1+n2)
})
$('.a').trigger('myClick',[2,3])

下面方法自動觸發input元素綁定focus事件,也會使焦點本身得到,瀏覽器默認行為,如有多個input元素,則觸發最後一個;

$('input').trigger('focus')

$('input').triggerHandler('focus')
//只觸發focus事件,焦點不會得到,即同時會取消瀏覽器對此事件的默認行為

3、命名空间

$('.box').bind('click',function(){
    console.log('default')
})
$('.box').bind('click.fn1',function(){
    console.log('fn1')
})
$('button').click(function(){
    $('.box').trigger('click!') //加!表示匹配所有不包命名空间的click,即fn1不会被执行;
})

4、动画
1个animate,同步执行,走斜线

$(this).animate({'left','200px','top','200px'})

2个animate,先后执行,走直角

$(this).animate({'left','200px'})
        .animate({'top','200px'})

若最后一切,切换css样式,而不是隐藏元素,则需要回调函数

$('.box').on('click', function () {
    $(this).animate({
        left:'500',height:'200',opacity:1
    },2000)
    .animate({
       top:'200px',width:'200'
    },2000).css('border','5px solid blue') 
    //最后一步css(),但这里动画一开始便会被执行,
    //若想动画结束后再执行,使用回调
})

$('.box').on('click', function () {
    $(this).animate({
        left:'500',height:'200',opacity:1
    },2000)
            .animate({
                top:'200px',width:'200'
            },2000, function () {
                $(this).css('border','5px solid blue')
            })
})
$('#btn').on('click', function () {
   $('.box').slideDown('normal', function () {
       $(this).css('border','5px solid blue')
       console.log($(this));
   })
})


一、停止元素动画

stop(clearQueue)

clearQueue,gotoEnd,true或false,

clearQueue: 代表是否要清空未扫行完的动画队列

gotoEnd: 代表是否直接将正在执行的动画跳转到末状态

stop(),立即停止当前正在进行,如下面还有动画则继续执行;

鼠标快速移动:

$('#btn').hover(function () {
    $('.box').stop().slideDown()
}, function () {
    $('.box').stop().slideUp()
})

stop(true),当前元素接下来尚未执行完的动画队列清空;

$('.box').hover(function () {
    $(this).stop()
            .animate({  //只带一个参数只能处理到这里
                height:150
            },200)
            .animate({  //处理这里需要stop(true)
                width:300
            },300)
}, function () {
    $(this).stop()
            .animate({
                height:22
            },200)
            .animate({
                width:60
            },300)
})

gotoEnd用于让正在执行的动画直接到达结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态况,可使用stop(false,true)

stop(true,true),停止当前动画并直接到达当前动画末状态,并清空队列。

jq只能设置正在执行动画的最终状态,没提供直接到达【未执行动画】队列的方法,以下无论怎么设置都无法在改变width或height时,将此div末状态变成300 x 150,且opacity:2

$('.box').on('mouseover', function () {
    $('.box').animate({
        width:300
    })       .animate({
                height:180
            })
            .animate({
                opacity:0.2
            })
})

二、判断元素是否处于动画状态

if(!$(elem).is(':animated')){
    //如果当前没有进行动画
}
<div id="box" style="width: 100px; height: 100px; background: #f00; position: absolute;"></div>
<script src="jquery1.11.1.js"></script>
<script>
    $(function() {
        // 开始动画
        $("#box").animate({left: 500}, 5000);
        $(document).on("click", function() {
            // 在选择器中使用
            if($("#box:animated").length) {
                $("body").append("<p>#box 尚在动画</p>");
            }

            // 在 is 中使用
            if(!$("#box").is(":animated")) {
                $("body").append("<p>#box 动画停止</p>");
            }
        });
    });
</script>

animate()方法替代:

//show()
$('.box').animate({
    height:'show',width:'show',opacity:'show'
},400)

//fadeIn(400)
$('.box').animate({
   opacity:'show'
},400)

//slideDown()
$('.box').animate({
   height:'show'
},400)

延迟动画:

$(this).animate({
    left:400
}).delay(1000)
    .animate({
    width:'200px'
})

1)1组元素动画:当在一个animate()应该多个时,动画是同时发生,以链式写法应用动画时,按顺序发生;
2)多组元素:默认情况下,动画同时发生,当以回调应用时,按回调顺序发生
非动画队列也按顺序,需要写在回调里


简单图片切换:

<div class="v-show clearfix">
    <div class="v-caption clearfix">
        <h4>图片</h4>
        <div class="v-caption-tip">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div class="v-caption-btn">
            <span class="prev">上一页</span>
            <span class="next">下一页</span>
        </div>
        <em><a href="#">更多</a></em>
    </div>
    <div class="v-content">
        <ul class="ul-pic">
            <li><img src="1.jpg" alt=""/></li>
            <li><img src="2.jpg" alt=""/></li>
            <li><img src="3.jpg" alt=""/></li>
            <li><img src="1.jpg" alt=""/></li>
            <li><img src="2.jpg" alt=""/></li>
            <li><img src="3.jpg" alt=""/></li>
            <li><img src="2.jpg" alt=""/></li>
            <li><img src="3.jpg" alt=""/></li>
        </ul>
    </div>
</div>

1、要点击的项为.next .prev,所以可以此点为基点向上找元素;
2、每次切换的宽度为ul父级的宽度即可;
3、page代表第一板,每板有3个图片,即总板数为li个数/3,向上取整;
4、!_show.is(':animated')限制在非运动时点击才生效;
5、-=,+=表示每次点击都累加或累减;

var _parent = $('.v-caption-btn span').parents('div.v-show');
var _show = _parent.find('.ul-pic');
var _content = _parent.find('div.v-content');
var v_width = _content.width();
var len = _show.find('li').length;
var page = 1;
var i = 3;
var page_count = Math.ceil(len / i);
$('.next').on('click', function () {
  if (!_show.is(':animated')) {
    if (page == page_count) {
      _show.animate({
        left: 0
      }, 'normal');
      page = 1;
    } 
    else {
      _show.animate({
        left: '-=' + v_width  //注意:-=
      }, 'slow');
      page++;
    }
    _parent.find('span').eq((page - 1)).addClass('on').siblings().removeClass()
  }
})
$('.prev').on('click', function () {
  if (!_show.is(':animated')) {
    if (page == 1) {  //第一板切换到最后一板
      _show.animate({
        left: '-=' + v_width * (page_count - 1)
      }, 'slow');
      page = page_count
    } 
    else {
      _show.animate({
        left: '+=' + v_width  //注意:+-
      }, 'slow');
      page--;
    }
    _parent.find('span').eq((page - 1)).addClass('on').siblings().removeClass()
  }
})

css主要设置ul父级relative,ul为absolute;

.v-content{overflow:hidden;position:relative}
.v-show{position:absolute}

*{margin:0;padding:0;font-size:16px}ul{float:left}.ul-pic{position:relative}img{width:150px;vertical-align:top}li{list-style:none;float:left;margin:10px;border:1px solid #ccc;padding:1px}.v-show{width:524px;margin:0 auto;border:1px solid #ccc;}.ul-pic{width:2000px}.v-caption-btn,.v-caption-tip,h4{float:left;margin-right:20px}.v-caption em{float:right}.on{color:red}.clearfix:after{content:'';width:0;height:0;display:block;clear:both;visibility:hidden}