Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Dec 2010
    Posts
    9
    Member #
    25828
    Ive managed a simple hover transition

    Code:
    <style>
    #trans {
    opacity:100;
    transition: all 1st ease-in-out;
    }
    #trans:hover {
    opacity:0;
    }
    </style>

    but i would like to make it clickable instead of hover. The only example i found that illustrates clickable transitions is (http://css3.bradshawenterprises.com):

    Code:
    <div id="cf2" class="shadow">
         <img class="bottom" src="/tests/images/Stones.jpg" />
         <img class="top" src="/tests/images/Summit.jpg" />
    </div>
    <p id="cf_onclick">Click me to toggle</p>
    
    #cf2 {
         position:relative;
         height:281px;
         width:450px;
         margin:0 auto;
    }
    #cf2 img {
         position:absolute;
         left:0;
         -webkit-transition: opacity 1s ease-in-out;
         -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
         transition: opacity 1s ease-in-out;
    }
    
    #cf2 img.transparent {
         opacity:0;
    }
    #cf_onclick {
         cursor:pointer;
    }               
    
    $(document).ready(function() {
         $("#cf_onclick").click(function() {
              $("#cf2 img.top").toggleClass("transparent");
         });
    });
    I tried implementing this but have had no luck and i dont see any way of
    adpating this for more complex moves. Anyone know of a simpler way of
    making clickable css transitions?

  2.  

  3. #2
    Junior Member
    Join Date
    Sep 2011
    Posts
    2
    Member #
    29255
    Sorry to be so late to the party - perhaps you have already discovered your solution... but my 2cents:

    This is much more easily accomplished using classes instead of id selectors because classes can be combined with the last style applied being implemented. Hover is often a handy pseudo-class but is not needed to accomplish transitions, etc. In your case, The style I would use is:

    Code:
    <style>
      .trans { /* style of original state */
      opacity:100;
      transition: all 1st ease-in-out;
      /* ... other desirable original state style code */
      }
      .transhover { /* style of final state */
      opacity:0;
      /* ... other desirable final state style code */
      }
    </style>
    Then, a simple javascript to toggle states:

    Code:
    <script type="text/javascript">
    var State1 = 'trans'; // class name of original state class.
    var State2 = State1 + ' transhover'; // class name of final class...
    // NOTE the space inserted before transhover in line above!
    
    function togglestate(thing){
      if (thing.className == State1){
        thing.className = State2;  // State2's equivalent: class="trans transhover"
      } else {
        thing.className = State1;  // State1's equivalent: class="trans"
      }
    }
    </script>
    Finally, you don't specify what you want to apply opacity to - but I assume an image. The HTML is:

    Code:
    ... other html ...
    <img class="trans" src="xyz.com/images/my.png" onclick="togglestate(this); return false;" />
    When the image is clicked, the script will toggle the styling applied. This works on every modern browser I've tried. Hope I haven't type-o'd too much in the code... but I think you can get the idea.

    The beauty of this approach is that the transitions are not lost when removing the second class.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Change:

    #trans:hover

    to:

    #trans:active

    That simple. No JS.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Sep 2011
    Posts
    2
    Member #
    29255
    I've been down the :active road. Good method as long as you do not need to sustain the effect after the mouse leaves the object / or releases the mouse button.

    Also buggy in IE 7 and earlier (of course... what isn't?)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

creating html button with on-click transitions
,
css 3 onclick transition effect
,

css onclick transition

,
css transition effects on click
,
css transition on click instead of hover
,

css3 onclick

,
css3 transition height on click
,
on click transitions html
,
onclick css transition effect
,

onclick css3 transitions top to bottom

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:21 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com