Complicated DIV issue involving transitions, stacking, and opacity

So here's the situation. I have three layers that are stacked on top of one another, two of which are transparent. The bottom layer expands in both directions, the second layer goes from being opaque to visible, and what I want the top layer to do is stay exactly where it is and not move at all.

I do not believe I can use absolute positioning, as it would affect the transitions.

After many hours of not seeing the top div at all, I finally managed to get it on top. Probably due to lack of sleep, but it was extremely frustrating. Now the issue is that the top DIV shutters somewhat from left to right before settling down.

Before I introduced the stationary DIV, the two other DIV's performed EXACTLY like I wanted them to. After that, head on into the barrier. I've put it up in jsfiddle so that it will make the most sense.

Am I just way off base and there's a far easier way to achieve the effect I'm shooting for? Help would be VERY MUCH APPRECIATED!

JSFIDDLE:

http://jsfiddle.net/F6syx/39/

CSS:

    /* LEFT SIDE */

        /* PRIMARY CONTAINERS */
        .side-item {
            width:22.83em;
            height:19em;
        }
        .coin-cont {
            width:19em;
            height:7.66em;
        }
        .coin-lay-0 {
            width:7.66em;
            height:7.66em;
            margin:0em;
            border-radius:3.83em;
            z-index:4000;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;           
        }
        .coin-lay-0:hover {
            width:19em;
            margin:auto;
        }       
        .coin-lay-1 {
            width:7.66em;
            height:7.66em;
            margin:0em auto;
            border-radius:3.83em;
            z-index:2000;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;               
        }
        .coin-lay-1:hover {
            width:19em;
        }
        .coin-lay-2 {
            width:19em;
            height:7.66em;
            background:url(../img/sde/coin-arrow.png) center;
            opacity:0;
            z-index:3000;
        }
        .coin-lay-2:hover {
            opacity:1;
            -webkit-transition: 0.50s ease-in-out;
            -moz-transition: 0.50s ease-in-out;
            -o-transition: 0.50s ease-in-out;
            transition: 0.50s ease-in-out;
            transition-delay: 0.25s;
            -webkit-transition-delay: 0.25s;                
        }
        .gold-coin {
            background: #efc14d; /* Old browsers */
            background: -moz-linear-gradient(top,  #efc14d 1%, #f59c4b 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#efc14d), color-stop(100%,#f59c4b)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #efc14d 1%,#f59c4b 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #efc14d 1%,#f59c4b 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #efc14d 1%,#f59c4b 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #efc14d 1%,#f59c4b 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc14d', endColorstr='#f59c4b',GradientType=0 ); /* IE6-9 */
            border-color:#f59c01;
            border-width:thin;
            border-style:solid;
        }
        .green-coin {
            background: #396580; /* Old browsers */
            background: -moz-linear-gradient(top, #396580 1%, #304755 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#396580), color-stop(100%,#304755)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #396580 1%,#304755 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #396580 1%,#304755 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #396580 1%,#304755 100%); /* IE10+ */
            background: linear-gradient(to bottom, #396580 1%,#304755 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396580', endColorstr='#304755',GradientType=0 ); /* IE6-9 */
            border-color:#004655;
            border-width:thin;
            border-style:solid;         
        }
        #home-coin {
            background:url(../img/sde/home-coin.png)center no-repeat;
        }
        #goal-coin {
            background:url(../img/sde/goal-coin.png)center no-repeat;
        }
        #help-coin {
            background:url(../img/sde/help-coin.png)center no-repeat;
        }

        /* SECONDARY CONTAINERS */
        .sub-coin-cont {
            width:100%;
            height:100%;
            font-family: Harabara;
            font-size:1.4em;
            display:none;
        }
        .sub-coin-left, .sub-coin-right {
            display:inline-block;
            float:left;
        }
        .sub-coin-left {
            margin-left:66px;
            width:92px;
            height:11.33em;
        }
        .sub-coin-right {
            width:115px;
            height:11.33em;
        }
        .sub-coin-right-link-01, .sub-coin-right-link-02, .sub-coin-right-link-03 {
            margin-top:1.0em;
            margin-bottom:1.0em;
        }
        .sub-coin-right-link-01 {
            margin-left:-3.0em;
        }
        .sub-coin-right-link-02 {
            margin-left:-1.5em;
        }
        .sub-coin-right-link-03 {
            margin-left:0em;
        }           

JS:

(function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv').slideUp(options.speed, options.easing);
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);

$(document).ready(function(){

   $('.show_hide').showHide({
        speed: 1000,  // speed you want the toggle to happen
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 0, // if you dont want the button text to change, set this to 0
        showText: '',// the button text to show when a div is closed
        hideText: '' // the button text to show when a div is open

    });

});

HTML:

    <div class="side-item">
        <a class="show_hide" href="#" rel="#slidingDiv">
            <div class="coin-cont">
                <div class="coin-lay-1 green-coin">
                    <div class="coin-lay-0" id="home-coin">                    
                        <div class="coin-lay-2">
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <div id="slidingDiv" class="toggleDiv sub-coin-cont">
            <div class="sub-coin-left">
            </div>
            <div class="sub-coin-right">
                <div class="sub-coin-right-link-01">
                    <a href="#">Dashboard</a>
                </div>
                <div class="sub-coin-right-link-02">
                    <a href="#">Pennybuilt&trade; IRA</a>
                </div>
                <div class="sub-coin-right-link-03">
                    <a href="#">Work 401k</a>
                </div>                    
            </div>
        </div>            
    </div>
    <div class="side-item">
        <a class="show_hide" href="#" rel="#slidingDiv_2">
            <div class="coin-cont">
                <div class="coin-lay-1 gold-coin">
                    <div class="coin-lay-0" id="goal-coin">                    
                        <div class="coin-lay-2">
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <div id="slidingDiv_2" class="sub-coin-cont toggleDiv">
            <div class="sub-coin-left">
            </div>
            <div class="sub-coin-right">
                <div class="sub-coin-right-link-01">
                    <a href="#">Goals</a>
                </div>
                <div class="sub-coin-right-link-02">
                    <a href="#">Debt</a>
                </div>
                <div class="sub-coin-right-link-03">
                    <a href="#">Credit Recovery</a>
                </div>                    
            </div>
        </div>            
    </div>
    <div class="side-item">
        <a class="show_hide" href="#" rel="#slidingDiv_3">
            <div class="coin-cont">
                <div class="coin-lay-1 green-coin">
                    <div class="coin-lay-0" id="help-coin">                    
                        <div class="coin-lay-2">
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <div id="slidingDiv_3" class="sub-coin-cont toggleDiv">
            <div class="sub-coin-left">
            </div>
            <div class="sub-coin-right">
                <div class="sub-coin-right-link-01">
                    <a href="#">FAQ</a>
                </div>
                <div class="sub-coin-right-link-02">
                    <a href="#">Forum</a>
                </div>
                <div class="sub-coin-right-link-03">
                    <a href="#">Contact Us</a>
                </div>                    
            </div>
        </div>
    </div>

EDIT: Reflects changes. Just In Cache's first solution when mixed with the show-hide jquery caused the main items to fall and rise dramatically.

Answers


For future reference, no need to mention lack of sleep or similar background problems. Anyway,

Using jQuery could reduce the little glitch, but not get rid of it...

I commented out the .coin-lay-1:hover and .coin-lay-0:hover in your CSS and replaced with some jQuery that does the same thing. See fiddle http://jsfiddle.net/F6syx/34/

This will just make it a bit more stable and predictable.

$(document).ready(function () {
 $('.coin-lay-1').hover(function () {

    $(this).stop(true).animate({
        "width": "100%"
    });
    $(this).find('.coin-lay-0').css({
        "margin": "auto"
    });
    $(this).find('.coin-lay-0').stop(true).animate({
        "width": "100%"
    });


 },


 function () {
    $(this).css({
        "padding-right": "0px"
    });
    $(this).animate({
        "width": "7.66em"
    })
    $(this).find('.coin-lay-0').stop(true).animate({
        "width": "7.66em"
    })

 });

});

So all you need to do is adding

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

to your <head>-tag, and then add the code above to the bottom of your <body>

To get rid of the pixel-jump

Remove your border-width:thin; and border-style:solid from your coin classes in the css. That's the trick. OR add a * before them so they work only in IE, *border-width:thin; *border-style:solid;


Need Your Help

RewriteRule into sub directories is failing

php regex .htaccess mod-rewrite

Hey all, I'm a bit new to .htaccess and regex, so bare with me.

How to clone a filtered jQuery object?

javascript jquery

I load a XML document to jQuery using $xml = $(xmldoc). Then I filter it via $xml.filter('id="something"'). When using .index() on the filtered xml, jQuery returns the index in the original listing...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.