Announcement

Collapse
No announcement yet.

Image Fade Freebie

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Image Fade Freebie

    To add some interaction to your SellerDeck / Actinic site with a fade effect to images when hovering.

    In the <head> add the following after the call to jQuery :

    Code:
    <script type='text/javascript'>
    $(document).ready(function(){
    $("img.jFADE").hover(
    function() {
    $(this).stop().animate({"opacity": "0.5"}, "fast");
    },
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    });
    
    });
    </script>
    If you have not already loaded jQuery use in the <head>

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    To the images you want to fade out just add:

    Code:
    class="jFADE"
    
    eg: <img src="image.jpg" class="jFADE">
    Have fun and enjoy


    Bikster
    SellerDeck Designs and Responsive Themes

    #2
    Just wondering....

    I've applied this to a site and can see that the script starts 'opacity 1' and the image fades to 'opacity 0.5' on mouse-over. I find my pointer drawn to the image and of course it starts to 'disappear' before my eyes!

    http://www.christmas-decor.co.uk/sto...d_Baskets.html

    I'm just wondering if anybody has an opinion that the image should load on the page at 0.5 (or 0.7) and then BRIGHTEN on hover like this?
    ______
    Paul

    (Note - links above may cease to behave as indicated once a decision is made)
    Paul
    Flower-Stands.co.uk - the UK's largest online supplier of Fresh Flower Merchandising Stands

    Using V10.2 with Norman's brilliantly simple TABBER.

    Comment


      #3
      Glad you found a use for it. It will work in either direction quite happily - which is best depends on the site and its use. For navigation I prefer to start "dull" and then brighten it with the focus ... for product images I prefer to let viewers see the product in all its glory and use the fade effect to indicate a link to a larger image for example.

      There is no right or wrong but what looks best on each site.


      Bikster
      SellerDeck Designs and Responsive Themes

      Comment


        #4
        If you replace the line:
        Code:
        	$("img.jFADE").hover(
        With:
        Code:
        	$("a img").hover(
        Then there is no need to add any class names to the images and the tweak will automatically apply to all click-able images.
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment

        Working...
        X