Question

我正在尝试制作动画，你可以在jsfiddle看到我的努力。这是我用过的代码：

/*  JavaScript:  */

    var app = function () {
        var self = this;
    
        var allBoxes = $('.box');
        var shadow = $('#shadow');
        var busy = false;
    
        self.init = function () {
            self.events();
        };
    
        self.getBoxLeftPosition = function(id)
        {
            var left = 100;
    
            if (id == 'box2')
            {
                left = 300;
            } else if (id == 'box3')
            {
                left = 500;
            } else if (id == 'box4')
            {
                left = 700;
            }
    
            return left;
        };
    
        self.events = function () {
    
            allBoxes.on('hover mousemove', function(event) {
                event.stopPropagation();
                var currentBox = $(this);
    
                if (currentBox.hasClass('inactive') && !busy)
                {
                    busy = true;
                    currentBox.removeClass('inactive').addClass('active').animate({
                        left: '-=30',
                        width: 260
                    }, 400, function () {
                        busy = false;
                    });
    
                    shadow.fadeIn(400);
                }
            });
    
            $('body').mousemove(function(event) {
                var currentBox = $('.active');
                var leftValue = self.getBoxLeftPosition(currentBox.attr('id'));
    
                if (currentBox.length > 0)
                {
                    currentBox.stop();
                    currentBox.animate({
                        left: leftValue,
                        width: 200
                    }, 300, 'swing', function () {
                        currentBox.removeClass('active').addClass('inactive');
                    }, 300);
    
                    shadow.fadeOut(300);
                }
            });
    
        };
    
        return self;
    };
    
    var main = new app();
    main.init();

/*  CSS:  */

html, body {
  margin: 0;
}
    
.box {
  position: absolute;
  top: 120px;
  width: 200px;
  height: 420px;
}
    
.box div {
  text-align: center;
  color: white;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  font-size: 25px;
  font-weight: bold;
}
    
#box1 {
  left: 100px;
  background: pink;
}
    
#box2 {
  left: 300px;
  background: skyblue;
}
    
#box3 {
  left: 500px;
  background: orange;
}
    
#box4 {
  left: 700px;
  background: lightgreen;
}
    
#shadow {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('https://lh6.googleusercontent.com/Vz0GTzpQVaxmlIvvGgg64CSxcYBbHzu7gMQERduJ4qjU5HAg8KfisFFQvIqvKL5Vn7LIy6HZ=w1920-h916');
  z-index: 10;
}
    
.inactive {
  z-index: 5;
}
   
.active {
  z-index: 20;
}

<!-- HTML:  -->

<div id="box1" class="box inactive">
  <div id="copy1">Copy 1</div>
</div>
    
<div id="box2" class="box inactive">
  <div id="copy2">Copy 2</div>
</div>
    
<div id="box3" class="box inactive">
  <div id="copy3">Copy 3</div>
</div>
    
<div id="box4" class="box inactive">
  <div id="copy4">Copy 4</div>
</div>
    
<div id="shadow"></div>

这就是我想用语言实现的目标：我有4个盒子，每当用户在其中一个上方盘旋时，盒子需要扩展一点，其他一切都需要变灰，每当鼠标离开盒子时需要回到原来的状态。

在我的jsfiddle中，我让它工作到了一个点，但它是错误的。

Answer 1

即使使用CSS

也可以达到相同的效果

＆＃13;

$(document).on('mouseenter', '.item', function(e){
    var me = $(this);
    $('.item').not(this).addClass('greyed');
});

$(document).on('mouseleave', '.item', function(e){
    $('.item').removeClass('greyed');
});

＆＃13;

ul,li{
list-style:none;padding:0;margin:0;
}
ul{
    width:400px;
}
li, .item {
    width:100px;
    height:100px;   
}
li {
    float:left;
    position:relative;
}
.item {
    background-color: #eee;
    border:1px solid #ccc;
    position:absolute;
    z-index:1;
    -webkit-transition:all 0.3s ease-in-out;
}
.item:hover {
    width:110px;
    z-index:2;
}

.red{
  background: red;
}

.pink{
  background: pink;
}

.blue{
  background: blue;
}

.yellow{
  background: yellow;
}

.greyed{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li>
        <div class="item red"></div>
    </li>
    <li>
        <div class="item blue"></div>
    </li>
    <li>
        <div class="item yellow"></div>
    </li>
    <li>
        <div class="item pink"></div>
    </li>
   
</ul>

＆＃13;

Answer 2

看看这个JSFiddle

$('.box').hover(function(){
$(this).siblings().addClass('inactive');
}, function(){
$(this).siblings().removeClass('inactive');
});

试图用纯粹的CSS进行，但遗憾的是prev sibling selector中没有css这样的东西。由于z-index在悬停时立即改变，它有点跳跃。

Answer 3

这就是我所做的。

首先，我发现你的css中的背景图片不是有效的资源，所以我用普通的背景颜色替换它（它是透明的黑色，你可能想调整它）。

其次，我将allBoxes.on('hover mousemove'更改为allBoxes.on('mouseover'，将$('body').mousemove更改为allBoxes.on('mouseout'。

第三，我删除了$busy标记跟踪。

第四，我将var currentBox = $('.active');更改为var currentBox = $(event.target);。

var app = function () {
    var self = this;

    var allBoxes = $('.box');
    var shadow = $('#shadow');
    var busy = false;

    self.init = function () {
        self.events();
    };

    self.getBoxLeftPosition = function(id)
    {
        var left = 100;

        if (id == 'box2')
        {
            left = 300;
        } else if (id == 'box3')
        {
            left = 500;
        } else if (id == 'box4')
        {
            left = 700;
        }

        return left;
    };

    self.events = function () {

        allBoxes.on('mouseover', function(event) {
            event.stopPropagation();
            var currentBox = $(this);

            if (currentBox.hasClass('inactive') && !busy)
            {
                //busy = true;
                currentBox.removeClass('inactive').addClass('active').animate({
                    left: '-=30',
                    width: 260
                }, 400, function () {
                    //busy = false;
                });

                shadow.fadeIn(400);
            }
        });

        allBoxes.on('mouseout', function(event) {
            var currentBox = $(event.target);
            var leftValue = self.getBoxLeftPosition(currentBox.attr('id'));

            if (currentBox.length > 0)
            {
                currentBox.stop();
                currentBox.animate({
                    left: leftValue,
                    width: 200
                }, 300, 'swing', function () {
                    currentBox.removeClass('active').addClass('inactive');
                }, 300);

                shadow.fadeOut(300);
            }
        });

    };

    return self;
};

var main = new app();
main.init();

html, body {
  margin: 0;
}

.box {
  position: absolute;
  top: 120px;
  width: 200px;
  height: 420px;
}

.box div {
  text-align: center;
  color: white;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  font-size: 25px;
  font-weight: bold;
}

#box1 {
  left: 100px;
  background: pink;
}

#box2 {
  left: 300px;
  background: skyblue;
}

#box3 {
  left: 500px;
  background: orange;
}

#box4 {
  left: 700px;
  background: lightgreen;
}

#shadow {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 600px;
  
  /*background: url('https://lh6.googleusercontent.com/Vz0GTzpQVaxmlIvvGgg64CSxcYBbHzu7gMQERduJ4qjU5HAg8KfisFFQvIqvKL5Vn7LIy6HZ=w1920-h916');*/
  background-color: rgba(0,0,0,0.5);  /* transparent black */
  
  z-index: 10;
}

.inactive {
  z-index: 5;
}

.active {
  z-index: 20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="box1" class="box inactive">
    <div id="copy1">Copy 1</div>
</div>

<div id="box2" class="box inactive">
    <div id="copy2">Copy 2</div>
</div>

<div id="box3" class="box inactive">
    <div id="copy3">Copy 3</div>
</div>

<div id="box4" class="box inactive">
    <div id="copy4">Copy 4</div>
</div>

<div id="shadow"></div>

如何使用jQuery

3 个答案: