Question

我在悬停时重新启动事件时遇到问题。我使用嵌套树（链接中的屏幕）

当我将鼠标悬停在'3'或'2'上时，我想缩小当前树节点并放大悬停元素以显示有关其他树节点元素的一些信息。我正在研究角度和使用指令。这是我的代码的一部分

jQuery(document).ready(function($) {
               $timeout(function(){
                   var treeNode = element[0].previousElementSibling;
                   var treeNodeWidth = element[0].previousElementSibling.offsetWidth;
                   $(treeNode).outerWidth(treeNodeWidth - element[0].offsetWidth - 5);

                   var elementChildrenWidth = element.children().width();
                   prevTreeNode = $(element).prev();
                   prevTreeNodeWidth = $(prevTreeNode).width();
                   resizeWidth = prevTreeNodeWidth - 100;

// =====> This is part with my issue 
                   $(element).children().hover(function() {
                        $(this).animate({width: '100px'}, 2000);
                        $(prevTreeNode).animate({width: resizeWidth}, 2000);
                   }, function() {
                        $(this).animate({width: '20px'}, 500);
                        $(prevTreeNode).animate({width: prevTreeNodeWidth}, 500);
                   });

               });
           });

Html结构很简单：

<ul class="shortLangContainer" ng-if="node.pagesMerged" set-tree-node-width>
                    <li ng-repeat="shortLang in node.pagesMerged">{{shortLang.langId}} <div class="shortLangContent">{{shortLang.menuPos}}</div></li>
                </ul>

我尝试使用setTimeout，延迟tanstitions，添加类但动画仍然很乱。也许这是让它正常工作的方法。只有在第一个结束时才可以触发另一个悬停事件？

编辑：这是完整的指令：

app.directive('setTreeNodeWidth', function($timeout) {
   return {
       restrict: 'A',
       link: function(scope, element, attrs) {
           jQuery(document).ready(function($) {
               $timeout(function(){
                   var treeNode = element[0].previousElementSibling;
                   var treeNodeWidth = element[0].previousElementSibling.offsetWidth;
                   $(treeNode).outerWidth(treeNodeWidth - element[0].offsetWidth - 5);

                   var elementChildrenWidth = element.children().width();
                   prevTreeNode = $(element).prev();
                   prevTreeNodeWidth = $(prevTreeNode).width();
                   resizeWidth = prevTreeNodeWidth - 100;

                   $(element).children().hover(function() {
                        $(this).animate({width: '100px'}, 2000);
                        $(prevTreeNode).animate({width: resizeWidth}, 2000);
                   }, function() {
                        $(this).animate({width: '20px'}, 500);
                        $(prevTreeNode).animate({width: prevTreeNodeWidth}, 500);
                   });

               });
           });
       }
   }
});

在悬停时调整嵌套树元素的大小

0 个答案: