CODEWITHSUNDEEP
jqueryhtml
lama
lama

Reputation: 21

fade in and out when hovering

I have this code :

 <!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>

Which retrieves from php file some pictures and display it. I want to use jquery to fade in and out pictures when hovering in and out.

I tried the jquery above but this will fade in and out all of the retrieved pictures at once. How to do it so it will be on one picture at time ?

Upvotes: 0

Views: 275

Answers (3)

Abhitalks
Abhitalks

Reputation: 28397

Because you have tagged this question with css, I would suggest a css-only solution. You don't really need jQuery/Javascript for this.

Just use transition on the images.

See this snippet:

#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>

Update:

If you only want to use jQuery, you can make it simpler by still using a class and then assigning it on hover. Not many changes.

See this snippet:

$("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>

And a fiddle for you to play with: http://jsfiddle.net/abhitalks/py8ydLx4/

Update 2:

If you still want to use jQuery fade only, then all you have to do is, this:

$("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);
});

And the fiddle: http://jsfiddle.net/abhitalks/py8ydLx4/2/

Note:

I would strongly recommend using CSS transition instead of jQuery animations because CSS transition are far more efficient than jQuery animations.

Upvotes: 2

Captain Planet
Captain Planet

Reputation: 408

Try this:

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

Let me know if it worked!

Upvotes: 0

himanshu
himanshu

Reputation: 1797

i think you have multiple images in #images so change your hover condition to #images img

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

   });

Upvotes: 0

Related Questions