Как переключить эффект fadeIn / fadeOut на изображение в jQuery? - PullRequest
Новая
       29

Как переключить эффект fadeIn / fadeOut на изображение в jQuery?

0 голосов
/ 15 ноября 2011

У меня это работает до состояния "почти готово": http://jsbin.com/icuvit

Может кто-нибудь показать мне, как это исправить, так что если я при наведении курсора, он становится темным, а не темным в первомпример.Таким образом, это идет от нормальный -> темный .

Что я могу изменить в коде js ниже? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>  
  <div id="mask-div"></div>
  <img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)",
      "display": "block"
    })
    .mouseover( function() {
         $(this).fadeOut("slow");
    })
  ;

  $("#test-img").mouseout( function() {
      $("#mask-div").fadeIn("slow");
  });

});
</script>  
</body>
</html>

Многиеспасибо за любые указатели.

Ответы [ 3 ]

3 голосов
/ 15 ноября 2011

Вам нужно немного поменять местами:

  1. Спрятать маску изначально
  2. Когда изображение наведено на мышь, покажите маску (когда маска еще не видна, вы наведите курсор мыши на изображение)
  3. Когда маска отключена от мыши, скройте маску (когда маска уже видима, вы отключите маску)

Как: http://jsbin.com/icuvit/3/edit.

  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)"
    })
    .mouseout( function() {
      $("#mask-div").fadeOut("slow");
    })
    .hide();

  $("#test-img")
    .mouseover( function() {
      $("#mask-div").fadeIn("slow");
    });

И немного CSS впервые: 

#mask-div {
  display: none;
}
1 голос
/ 15 ноября 2011 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>  
  <div id="mask-div"></div>
  <img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)",
      "display": "none"
    })
    .mouseout( function() {
         $(this).fadeOut("slow");
    })
  ;

  $("#test-img").mouseover( function() {
      $("#mask-div").fadeIn("slow");
  });

});
</script>  
</body>
</html>
1 голос
/ 15 ноября 2011

Если вы на самом деле используете некоторые другие селекторы, которые дают несколько изображений, вы все равно можете использовать технику pimvdb следующим образом. 

$('.test-img').each(function(){
    var $img = $(this);

    $("#mask-div")
        .css({
        "position": "absolute",
        "width": 275,
        "height": 110,
        "background": "rgba(0, 0, 0, 0.5)"
    })
    .mouseout( function() {
        $("#mask-div").fadeOut("slow");
    })
    .hide();

    $img.mouseover( function() {
        $("#mask-div").fadeIn("slow");
    });
});
...