使用uk-animation -fade javascript的HTML动画无效

时间:2017-10-24 17:07:17

标签: javascript jquery html css css-animations

嗨我在html文件中有以下内容:我希望看到的是部分覆盖图像“avatar”的块,当我将鼠标悬停在其上时,它会消失,并且只显示图像。我还在顶部添加了以下css文件,还有什么我应该做的吗?动画不起作用!非常感谢请帮助我!

    <link rel="stylesheet" href="assets/css/theme.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/custom.css">
    <link href="assets/css/widgetkit-9e41562f.css" rel="stylesheet" type="text/css">

    <script src="/assets/js1/downloads/uikit.js"></script>
    <script src="/assets/js1/downloads/autocomplete.js"></script>
    <script src="/assets/js1/downloads/search.js"></script>
    <script src="/assets/js1/downloads/verticalDropdown.js"></script>
    <script src="/assets/js1/downloads/social.js"></script>
    <script src="/assets/js1/downloads/theme.js"></script>
    <script src="/assets/js1/downloads/snap.svg-min.js"></script>
    <script src="/assets/js1/downloads/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/assets/js1/downloads/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/assets/js1/downloads/widgetkit-e0b74091.js" type="text/javascript"></script>      
        <script type="text/javascript" async="" src="/assets/js1/downloads/ga.js"></script><script src="/assets/js1/downloads/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">

window.setInterval(function(){var r; try {r = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(“Microsoft.XMLHTTP”)} catch(e){} if(r){r。打开( “GET”, “/ index.php的选项= com_ajax&安培;格式= JSON”,TRUE); r.send(空)}},840000);     

    <script type="text/javascript">var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23972361-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

      </script>
    <div class="tm-page">

    <div class="uk-container uk-container-center">

                <div class="tm-block ">
                <section id = "test" class="tm-top-b uk-grid" data-uk-grid-match="{target:'.uk-panel'}" data-uk-grid-margin="">
                <div class="uk-hidden-small uk-width-medium-1-1"><div class="uk-panel uk-hidden-small">
                    <div class="uk-text-center">

                <div class="uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'.tm-overlay-caption'}">
                <div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-4 uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade'}">
                <div class="tm-overlay"><img src="./images/avatar.jpg" alt="avatar.jpg"><svg class="uk-hidden-small" viewBox="0 0 180 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"></path><desc>Created with Snap</desc><defs></defs></svg><br>
                <div class="tm-overlay-caption" style="min-height: 0px;">
                <h2 class="tm-overlay-title">A results</h2>
                </div>
                </div>
                </div>
                <div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-4 uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', delay:100}">
                <div class="tm-overlay"><img src="./images/avatar.jpg" alt="avatar.jpg"><svg class="uk-hidden-small" viewBox="0 0 180 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"></path><desc>Created with Snap</desc><defs></defs></svg><br>
                <div class="tm-overlay-caption" style="min-height: 0px;">
                <h2 class="tm-overlay-title">B results</h2>
                </div>
                </div>
                </div>
                <div class="uk-width-1-1 uk-width-small-1-2 uk-hidden-medium uk-width-large-1-4 uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
                <div class="tm-overlay"><img src="./images/avatar.jpg" alt="avatar.jpg"><svg class="uk-hidden-small" viewBox="0 0 180 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"></path><desc>Created with Snap</desc><defs></defs></svg><br>
                <div class="tm-overlay"><img src="./images/avatar.jpg" alt="avatar.jpg"><svg class="uk-hidden-small" viewBox="0 0 180 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"></path><desc>Created with Snap</desc><defs></defs></svg><br>
                <div class="tm-overlay-caption" style="min-height: 0px;">
                <h2 class="tm-overlay-title">C results</h2>

                </div>
                </div>
                </div>
                </div>
                </div>
                </section>
                </div>
                </div>

                    </div>
                </div>


            </div>
                </div>  

0 个答案:

没有答案