我如何在拖动元素时逐渐减少元素的透明度？

在我的程序中实际上有两个太阳，但一个太阳又名“dark_sun”就在另一个“太阳”的后面。我希望“太阳”逐渐淡出或在弧线中间逐渐变得不透明（这是我的程序中太阳的方向），所以在弧线的末端只能看到“dark_sun”。我怎么做？这是程序URL：http://whatisupson.tumblr.com/我如何在拖动元素时逐渐减少元素的透明度？

<style> 
     /* Colors */ 
     body { 
      background: url(http://i.imgur.com/aZty7Mq.png); 
      animation: mymove 4s linear infinite; 
      -webkit-animation: mymove 4s linear infinite; 
      -moz-animation: mymove 4s linear infinite; 
     } 
     @keyframes mymove { 
      0% { background-position: 0 0; } 
      50% { background-position: 40% 0; } 
     } 
     #dark_sun { 
      position: absolute; 
      width: 300px; 
      height: 300px; 
      top: 20%; 
      left: 10%; 
     } 
     #sun { 
      position: absolute; 
      width: 300px; 
      height: 300px; 
      top: 20%; 
      left: 10%; 
     } 
    </style> 

    <html> 
    <body> 
      <img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png"> 
      <img id="sun" src="http://i.imgur.com/DGkZYZQ.png"> 
    </body> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
    var width = 300; 
    var sun = $("#sun"); 
    var dark = $("#dark_sun") 

    sun.draggable({ 
     axis: "x", 
     containment: 'body', 
     drag: function() { 
     var x = sun.offset().left + (sun.width()/2); 
     var total = $(window).width(); 
     var heightPct = Math.pow((total/2) - x, 2)/Math.pow($(window).width()/2, 2); 
     console.log(x, $(window).width(), heightPct * 100); 
     this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%"; 

     dark.css({ 
      left:x -(sun.width()/2), 
      marginTop: heightPct * 30 + "%" 
     }); 
     $(this).css({ 
      marginTop: heightPct * 30 + "%" 
     }); 
     } 
    }); 

    </script> 
    </html>

来源

2015-10-19 Muniza Siddiqui

你可以这样尝试，相对于窗口的边界具有不透明度。小提琴：http://jsfiddle.net/oujq3zpq/

$(this).css({ 
     opacity: 1-(x/total), 
     marginTop: heightPct * 30 + "%" 
    });

仍然有改进的余地，因为太阳永远不会用这种方法完全不透明。

来源

2015-10-19 16:27:32 Lacrioque

谢谢我认为这是完全正确的，它正是我想要的。另外说我想添加一个第三元素，如月亮，并希望它在弧的最后1/3处可见。我可以只使用相同的方法，它会起作用吗？ –

是的，应该这样工作，只要让你的数学正确，它就会工作。如果你需要帮助，你可以再问一次。不用谢。 – Lacrioque

是的，你能帮我调整数学吗？这是我的新代码：https://gist.github.com/anonymous/4d1d6d2f2288f7336679 月亮现在落后于两个太阳。 –

你必须做一个函数来“晒” CSS属性不透明度值动画从0.0到1.0。像不透明度=（距左/窗口宽度的距离）

来源

2015-10-19 16:16:17 rbrilhante

我如何在拖动元素时逐渐减少元素的透明度？

回答

相关问题