Bootstrap Snippet jQuery hover/fade effect B&W using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- SUBMITTED March 28, 2014 at 9:42am  -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
             <h2>jQuery hover/fade effect <small>Black and White</small></h2>
            <p>Unlike some CSS3 techniques this works in all modern browsers. It swaps the image to achieve desired effects with <strong>only 6 lines</strong> of jQuery.  This "older" method of swapping images seems to load faster than the CSS <code>-webkit-filter</code> etc.</p>
        </div>
        <!-- /.col-md-12 -->
    </div> <!-- ./row -->
    
    <div class="row">
        <div class="col-md-4">
            <h3>Example 1</h3>
            <div class="fd-fade1 fd-effect">
                <img src="http://i.imgur.com/yxAxCaK.jpg" class="fd-img1" alt="">
            </div>
            <!-- /.fd-fade -->
            <br> <a href="https://flic.kr/p/2fLGw" target="_blank">Flickr CC: view from villa gimbrone</a>
        </div> <!-- /.col-md-4 -->
        
        <div class="col-md-4">
            <h3>Example 2</h3>
            <div class="fd-fade2 fd-effect">
                <img src="http://i.imgur.com/jlattvQ.jpg" class="fd-img2" alt="">
            </div>
            <!-- /. fd-fade -->
            <br> <a href="https://flic.kr/p/8j6EeB" target="_blank">Flickr CC: Leigh-on-Sea</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
the prefix fd-
is used as an abbreviation for
fade,
and to clearly indicate it is not a Bootstrap class
B&W images are in background-image
*/
body{
color: white;
background-color:#111;
}
.fd-fade1 {
  width: 240px;
  height: 180px;
  background-image: url(http://i.imgur.com/jfyEocn.jpg)
}
.fd-fade2 {
  width: 240px;
  height: 160px;
  background-image: url(http://i.imgur.com/l1YVUSu.jpg)
}
.fd-fade3 {
  width: 240px;
  height: 152px;
  background-image: url(http://i.imgur.com/6XO7ueG.jpg)
}
/*hide all the images, so background image shows*/
img.fd-img1 {
  display: none;
}
img.fd-img2 {
  display: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
Ref: http://api.jquery.com/hover/
Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
Thanks to: Serlite
for streamline code from 26 lines to ONLY 6 lines,
because of use of $(this) trick.
ref:
http://stackoverflow.com/questions/22702324/jquery-using-this-thumbnails-swap-images-twitter-bootstrap
jsFidde:
http://jsfiddle.net/An2EK/2/
and best to use .stop
http://jsfiddle.net/jHUV7/1/
*/
$(document).ready(function () {
    $('.fd-effect').hover(function () {
        $(this).children("img").stop().fadeIn('slow');  // add .stop() to prevent event chaining
    }, function () {
        $(this).children("img").stop().fadeOut("slow");
    });  // end .fd-effect
}); // end document.ready function
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"jQuery hover/fade effect B&W"
Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"jQuery hover/fade effect B&W" Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"jQuery hover/fade effect B&W"
Bootstrap 3.1.0 Snippet by mrmccormack