Question

我总是遇到CSS和JQuery结合的问题。有人能告诉我这里我做错了什么吗？我只是想移动我的div。感谢所有的解决方案，我想进一步了解。如何在不同的方向上多次移动它？

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    jQuery(document).ready(function () {
        jQuery("#hello").mouseenter(function () {
            jQuery("#hello").animate({ left: '150px' }, slow);

        });

    });
</script>


<div id="hello">
    Hello World!
</div>
<style>
    #hello{
        color: gray;
        background-color: gold;
        width: 125px;
        height: 125px;
        position: fixed;
        left: 350px;
        top: 350px;
        border-width: 2px;
        border-color: lavender;
        text-align: center;

    }
</style>

Answer 1

在使用1，left，right或top css属性时，您的div需要设置位置，因此即使您的代码看起来正确，也不会有任何更改。

尝试为div设置一个位置，例如relative。

bottom

Answer 2

如果您使用慢/快选项您需要将'慢'放入括号

    // GET: Home/ChooseScenario
    public async Task<ActionResult> ChooseScenario(string charId)
    {
        string currentUser = User.Identity.GetUserId();

        //Convert passed in charId string to related Character object 
        var pFSCharacter = await db.PFSCharacters
            .FirstOrDefaultAsync(c => c.PFSCHARACTERID == charId);

        List<PFSCharacter> userCharacters = new List<PFSCharacter>();

        //List<PFSScenario> pFSScenarios = new List<PFSScenario>();
        //determine if the pFSCharacter is Core and only give me back a list of characters for the user that are core as well 
        if (pFSCharacter.IsCore)
        {
            userCharacters = await db.PFSCharacters
                .Where(x => x.PFSUSERID == currentUser && x.IsCore == true)
                .ToListAsync();
        }
        //If pFSCharacter is not core give me back a list of characters for the user that are not core
        else
        {
            userCharacters = await db.PFSCharacters
                .Where(x => x.PFSUSERID == currentUser && x.IsCore == false)
                .ToListAsync();
        }

        var pFSScenarios = await db.PFSScenarios.Where(i => i.IsActive == true && i.MinLevel <= pFSCharacter.CharLevel && i.MaxLevel >= pFSCharacter.CharLevel && !i.PFSCharacterScenarios.Any(x => userCharacters.Contains(x.PFSCharacter))).ToListAsync();

        //pass pFSCharacter to View to pass to next Controller ActionResult
        ViewBag.Character = pFSCharacter;

        //send list of scenarios to the View to be displayed.
        return View(pFSScenarios);
    }

您可以在没有括号的情况下设置毫秒的动画时间。

Answer 3

animate()的持续时间参数未定义（Uncaught ReferenceError: slow is not defined）。

应该是"slow"

 jQuery("#hello").animate({ left: '150px' }, "slow");

或

 var slow = 200;
 jQuery("#hello").animate({ left: '150px' }, slow);

Fiddle （有错误）

Fiddle （已更新）

如果只是关于mouseover事件，我会推荐CSS方式:hover。如果要添加更多功能，则更好。

我无法移动我的div

3 个答案: