CODEWITHSUNDEEP
jquery
mpdc
mpdc

Reputation: 3560

Toggle a hover opacity

How can I revert a hover opacity effect on mouseout? I can get my hover effect to happen without any problems, but I can't seem to undo it's effect.

JSFiddle: https://jsfiddle.net/3jeezjrb/

<div class="row" style="padding-top:15px">
    <div class="col-xs-6 col-xs-push-3">
        <div class="list-group">
            <a class="list-group-item" href="#">Hello, World</a>
            <a class="list-group-item" href="#">Goodbye, Earth</a>
        </div>
    </div>
</div>

JQuery:

$(".list-group-item").hover(function() {
    $(this).stop().animate({"opacity": "0.5"});
});

I would definitely like to do this effect in JQuery, and not in pure CSS, as I need to add additional functionality afterwards (text overlay).

Upvotes: 0

Views: 82

Answers (2)

Tushar
Tushar

Reputation: 87203

You can use the second param of hover. This will run when mouseout of the element.

$(".list-group-item").hover(function() {
    $(this).stop().animate({
        "opacity": "0.5"
    });
}, function() {
    $(this).stop().animate({
        "opacity": "1"
    });
});

Demo: https://jsfiddle.net/tusharj/3jeezjrb/1/

I'd suggest you to use css rather than jQuery:

.list-group-item:hover {
    opacity: .5;
}

Demo: https://jsfiddle.net/tusharj/3jeezjrb/2/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388346

Use the mouseleave callback which is the second argument to hover()

$(".list-group-item").hover(function() {
  $(this).stop().animate({
    "opacity": "0.5"
  });
}, function() {
  $(this).stop().animate({
    "opacity": 1
  });
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row" style="padding-top:15px">
  <div class="col-xs-6 col-xs-push-3">
    <div class="list-group">
      <a class="list-group-item" href="#">Hello, World</a>
      <a class="list-group-item" href="#">Goodbye, Earth</a>
    </div>
  </div>
</div>

You can also use teh shorten version like

$(".list-group-item").hover(function (e) {
    $(this).stop().animate({
        "opacity": e.type=='mouseenter' ? .5 : 1
    });
});


$(".list-group-item").hover(function(e) {
  $(this).stop().animate({
    "opacity": e.type == 'mouseenter' ? .5 : 1
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="padding-top:15px">
  <div class="col-xs-6 col-xs-push-3">
    <div class="list-group">
      <a class="list-group-item" href="#">Hello, World</a>
      <a class="list-group-item" href="#">Goodbye, Earth</a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions