javascript - 如何在绝对定位元素上从右到中心过渡？

Question

我有一个将鼠标悬停在其上的覆盖元素，我想要 <h3>标签以从右到中心的过渡出现，例如 here 。我只想要上面链接具有的过渡效果。任何人请帮助我。提前致谢。

HTML

<div class="row mycustombox">
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
</div>

CSS

.customoverlay {
    position:relative;
}
.customoverlay img {
    margin:0;
    padding:0;
}
.customoverlay .inneroverlaybox {
    position:absolute;
    background:#002137;
    width:100%;
    top:0;
    left:0;
    display:none;
    overflow:hidden;
}
.customoverlay .inneroverlaybox h3 {
    width:100%;
    color:#fff;
    margin:0;
    padding:0;
    position:absolute;
}

Javascript

<script type="text/javascript">

        jQuery(document).ready(function(){
            var windowWidth=jQuery( window ).width();
            var columnPadding;
            var imageHeight;

            if(windowWidth<=320){
                columnPadding='3px';    
                imageHeight='65px';
            }
            if(windowWidth>320 && windowWidth<=360){
                columnPadding='5px';    
                imageHeight='80px';
            }
            if(windowWidth>360 && windowWidth<=480){
                columnPadding='7px';
                imageHeight='100px';
            }
            if(windowWidth>480 && windowWidth<=768){
                columnPadding='7px';
                imageHeight='150px';                
            }
            if(windowWidth>768 && windowWidth<=991){
                columnPadding='7px';    
                imageHeight='200px';
            }
            if(windowWidth>991 && windowWidth<=1200){
                columnPadding='7px';
                imageHeight='250px';    
            }
            if(windowWidth>1200){
                imageHeight='300px';    
            }



            var getimagewidth=jQuery(".customoverlay").find('img').width();
            jQuery(".customoverlay").parent("[class*='col-']").css('height',imageHeight);
            jQuery(".customoverlay").parent("[class*='col-']").css('margin-bottom',columnPadding);
            jQuery(".customoverlay").find('img').css('height',imageHeight);
            jQuery(".customoverlay").find('.inneroverlaybox').css('height',imageHeight);
            jQuery( window ).resize(function() {
            var windowWidth2=jQuery( window ).width();  
            var imageHeight2;
            var columnPadding2;

            if(windowWidth2<=320){  
                imageHeight2='65px';
                columnPadding2='5px';
            }
            if(windowWidth2>320 && windowWidth2<=360){  
                imageHeight2='80px';
                columnPadding2='7px';
            }
            if(windowWidth2>360 && windowWidth2<=480){
                imageHeight2='100px';
                columnPadding2='10px';
            }
            if(windowWidth2>480 && windowWidth2<=768){
                imageHeight2='150px';
                columnPadding2='15px';  
            }
            if(windowWidth2>768 && windowWidth2<=991){  
                imageHeight2='200px';
                columnPadding2='15px';
            }
            if(windowWidth2>991 && windowWidth2<=1200){
                imageHeight2='250px';
                columnPadding2='15px';  
            }
            if(windowWidth2>1200){
                imageHeight2='300px';
                columnPadding2='15px';              
            }

                jQuery(".customoverlay").find('img').css('height',imageHeight2);
                jQuery(".customoverlay").find('.inneroverlaybox').css('height',imageHeight2);
                jQuery(".customoverlay").parent("[class*='col-']").css('margin-bottom',columnPadding2);
                jQuery(".customoverlay").parent("[class*='col-']").css('height',imageHeight2);
            });

            jQuery(".customoverlay").mouseover(function(){              
                jQuery(this).find('.inneroverlaybox').show();
                jQuery(this).find('.inneroverlaybox').css('transition','all .35s ease-in-out');
                jQuery(this).find('.inneroverlaybox').css('text-align','center');
                // jQuery(this).find('.inneroverlaybox h3').animate({"text-align":"center"}, 1000);             
            });
            jQuery(".customoverlay").mouseout(function(){
                jQuery(this).find('.inneroverlaybox').hide();
            });
        });
        jQuery(window).load(function(){
            var getimagewidth=jQuery(".customoverlay").find('img').width();
            var imageHeight;
            var windowWidth=jQuery( window ).width();
            var columnPadding;

            if(windowWidth<=320){
                imageHeight='65px'; 
            }
            if(windowWidth>320 && windowWidth<=360){
                imageHeight='80px'; 
            }
            if(windowWidth>360 && windowWidth<=480){    
                imageHeight='100px';
            }
            if(windowWidth>480 && windowWidth<=768){
                imageHeight='150px';
            }
            if(windowWidth>768 && windowWidth<=991){
                imageHeight='200px';    
            }
            if(windowWidth>991 && windowWidth<=1200){
                imageHeight='250px';    
            }
            if(windowWidth>1200){
                imageHeight='300px';
                columnPadding='15px';
            }


            jQuery(".customoverlay").parent("[class*='col-']").css('margin-bottom',columnPadding);
            jQuery(".customoverlay").parent("[class*='col-']").css('height',imageHeight);
            jQuery(".customoverlay").find('img').css('height',imageHeight);
        });
        </script>

Answer 1

你可以用CSS3制作这个动画，非常简单。 悬停时，框的不透明度发生变化并且文本向左移动，因此， CSS:

.customoverlay {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
}
.customoverlay img {
    margin: 0;
    padding: 0;
}
.customoverlay .inneroverlaybox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.3s ease-in-out 0s;
    -moz-transition: opacity 0.3s ease-in-out 0s;
    -ms-transition: opacity 0.3s ease-in-out 0s;
    -o-transition: opacity 0.3s ease-in-out 0s;
    background: #002137;
}
.customoverlay .inneroverlaybox h3 {
    position: relative;
    left: 100%;
    padding: 0;
    margin: 0;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.customoverlay:hover .inneroverlaybox { opacity: 1; }
.customoverlay:hover .inneroverlaybox h3 { left: 0%; }

代码笔:http://codepen.io/AnTSaSk/pen/wMWzpj