Question

我有这段代码：

 <!DOCTYPE html>
   <html>
<head>
   <title>Instagram Search</title>
   <style>
        header {
height: 30px; 
position:fixed;
width: 100%;
background: linear-gradient(white, gray);
top: 0;
}

.main {
margin-top: 70px;
}
body {
background-image: url("black-texture-wallpaper-background-wood-backround-wooden-wood1.jpg");
}
.img{
    border-radius: 6px;
     -webkit-box-shadow: 1px 1px 15px #fff;
    box-shadow: 1px 1px 15px #fff;
     height: 200px;
width: 200px;
}
    @font-face {
font-family: myFirstFont;
src: url(Cash_Currency.ttf);
   }
   h1{
    font-size: 4em;
        text-shadow: 3px 3px #fff;
            font-family: myFirstFont;

} 

   </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#submit").click(function(){
                $.ajax({
                    url: "http://www.lamia.byethost18.com/get_info.php",
                    data: {keyword: $("#keyword").val()},
                    dataType: 'JSON',
                    success: 
                        function(jsonStr) {
                        $('#name').text($("#keyword").val());
                        var all_results = '';
                        $.each(jsonStr.data, function(index, element){
                            all_results += '<div style="float:left; margin-left: 100px;" class="result_row">';
                            all_results += '<img class="img" src="'+element.profile_picture+'" />';
                            all_results += '<p align="center"> @' + element.username + '</p>';
                            all_results += '</div>';
                        });
                            $('#images').html(all_results);
                        }
                });
            }); 
        });
        $(document).ready(function() {  
        $('#images img').css('opacity', 0.4);  

   $('#images img').hover(  
   function(){  
  $(this).fadeIn('slow');  
 },  
  function(){  
   $(this).fadeOut('slow');  
  });  

   }); 
    </script>
</head>

<body>
    <header style="margin-bottom: 1cm; ">
        <div style="float:left;" align="left">Instagram User Explorer</div>
            <div align="center">
                <form name="contact" id="contact" method="get">
                Search : <input type="text" name="keyword" id="keyword"/>
                <input type="button" value="search!" name="submit" id="submit"/>
                </form>
            </div>
    </header>

    <section class="main">
        <h1 id="name" align="center"></h1>
        <div id="images"></div>
    </section>

</body>

   </html>

从php检索一些图片并显示它。我希望在悬停时使用jquery淡出和淡出图片。

我尝试了上面的jquery，但这会立即淡出和删除所有检索到的图片。如何做到这一点，它将在一张照片上？

Answer 1

因为您已使用css标记了此问题，所以我建议使用仅限CSS的解决方案。你真的不需要jQuery / Javascript。

只需在图片上使用transition即可。

请参阅此代码段：

#images .img {
  opacity: 0.4;
  cursor: pointer;
  transition: 750ms all;
}

#images .img:hover {
  opacity: 1;
}

<div id="images">
	<div style="float:left; margin-left: 100px;" class="result_row">
		<img class="img" src="http://lorempixel.com/64/64" />
		<p align="center">Username 1</p>
	</div>
	<div style="float:left; margin-left: 100px;" class="result_row">
		<img class="img" src="http://lorempixel.com/63/63" />
		<p align="center">Username 2</p>
	</div>
	<div style="float:left; margin-left: 100px;" class="result_row">
		<img class="img" src="http://lorempixel.com/65/65" />
		<p align="center">Username 3</p>
	</div>
</div>

更新

如果你只想使用jQuery，你可以通过仍然使用类然后在悬停时分配它来简化它。没有太多变化。

请参阅此代码段：

$("div#images").on("mouseenter", ".img", function(e) {
    $(this).addClass("hover");
});

$("div#images").on("mouseleave", ".img", function(e) {
    $(this).removeClass("hover");
});

#images .img {
  cursor: pointer;
  opacity: 0.3;
  transition: 750ms all;
}

#images .img.hover {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images">
	<div style="float:left; margin-left: 100px;" class="result_row">
		<img class="img" src="http://lorempixel.com/64/64" />
		<p align="center">Username 1</p>
	</div>
	<div style="float:left; margin-left: 100px;" class="result_row">
		<img class="img" src="http://lorempixel.com/63/63" />
		<p align="center">Username 2</p>
	</div>
	<div style="float:left; margin-left: 100px;" class="result_row">
		<img class="img" src="http://lorempixel.com/65/65" />
		<p align="center">Username 3</p>
	</div>
</div>

让你玩的小提琴：http://jsfiddle.net/abhitalks/py8ydLx4/

更新2：

如果您仍然只想使用jQuery fade，那么您所要做的就是：

$("div#images").on("mouseenter", ".img", function(e) {
    $(this).stop().fadeTo("normal", 1);
});

$("div#images").on("mouseleave", ".img", function(e) {
    $(this).stop().fadeTo("normal", 0.3);
});

小提琴：http://jsfiddle.net/abhitalks/py8ydLx4/2/

注意：

我强烈建议使用CSS转换而不是jQuery动画，因为CSS转换比jQuery动画效率更高。

Answer 2

我认为您在#images中有多个图片，因此请将您的悬停条件更改为#images img

$('#images img').hover(  
     function(){  
  $(this).fadeTo('slow', 1);  
     },  
    function(){  
       $(this).fadeTo('slow', 0.4);  
      });  

   });

Answer 3

试试这个：

$('#images img').css('opacity', 0.4);  
 $('#images img').hover(  
     function(){  
  $(this).stop().fadeTo('slow', 1);  
     },  
    function(){  
       $(this).stop().fadeTo('slow', 0.4);  
      });

让我知道它是否有效！

悬停时淡入淡出

3 个答案:

更新

更新2：

注意：